sliderInput最大/最小文本標籤

Question

我目前正在使用多個sliderInputs的儀表板。是否可以用文本替換最大和最小標籤？例如，我的最小= 1和最大= 10.我想保持比例從1到10，而滑塊標籤分別顯示爲「更早」和「更晚」。

謝謝！

Answer 1

這裏簡短的回答是否定的，可悲的;沒有通過JavaScript中的底層代碼進行黑客攻擊，因此無法重新標記滑塊滴答（儘管有幾個格式化參數）。

但是，您可以通過向標籤傳入一個HTML樣式的內聯CSS來將標籤嵌入到小部件標籤中。確保設置小部件本身的寬度，所以一切都排隊，結果不算太差：

library(shiny) 

ui <- fluidPage(

    sliderInput(inputId = 'slider', 
       label = div(style='width:300px;', 
          div(style='float:left;', 'sooner'), 
          div(style='float:right;', 'later')), 
       min = 0, max = 10, value = 5, width = '300px') 

    ) 

server <- function(input, output) { 

} 

shinyApp(ui, server) 

Answer 2

也許這樣的事情。請注意，滑塊將返回從零開始的索引。

app.R

library(shiny) 

    df <- data.frame(x=1:24) 


    ui <- tagList(
      tags$head(
        HTML("<script type='text/javascript' src='js/sliderInit.js'></script>") 
      ), 
      fluidPage(


     titlePanel("Custom firs and last label"), 


     sidebarLayout(
      sidebarPanel(
      sliderInput("hour", 
         "Select hour:", 
         min = 1, 
         max = 10, 
         value = 5) 
     ), 


      mainPanel(
      textOutput("selectedNumber") 
     ) 
     ) 
    )) 


    server <- function(input, output) { 

     output$selectedNumber <- renderText({ 
       df[input$hour+1,] 
     }) 
    } 


    shinyApp(ui = ui, server = server) 

sliderInit.js

$(document).ready(function() { 
    $("#hour").ionRangeSlider({ 
      values: ["Sooner", "2", "3", "4", "5", "6", "7", "8", "9", "Later"] 
    }); 
    }); 

Answer 3

我有同樣的問題與您聯繫。不幸的是，無論是Shiny還是ionRangeSlider都無法爲這種變化提供簡單的功能。在純粹固執地尋找更微妙的方式之後，我遇到了以下CSS黑客攻擊。 （I也躲在值光標JS。）

ui <- fluidPage(

tags$head(
    #Using ionRangeSlider's javascript options you can hide/show selector labels and min/max labels 
    HTML(" 
    <script> 
    $(document).ready(function(){ 
     $(\".js-range-slider\").ionRangeSlider({ 
     hide_min_max: false, 
     hide_from_to: true 
     }); 

    }); 

    </script> 
    ") 
), 

#This CSS hack first hides the text within the span tags of the specified classes 
#Then it adds desired text and CSS properties. !important parameter is to override 
#inline css parameters. 
tags$style(type = "text/css", " 
    .irs-min {visibility:hidden !important;} 
    .irs-max {visibility:hidden !important;} 
    .js-irs-0 .irs .irs-min:after {content:'Hello' !important;} 
    .js-irs-0 .irs .irs-max:after {content:'Shiny' !important;} 
    //Restore css defaults to .irs-min and .irs-max 
    .irs-min:after { 
     visibility: visible !important; 
     display: block; 
     background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; 
     border-radius: 3px; 
     color: #333; 
     font-size: 10px; 
     line-height: 1.333; 
     padding: 1px 3px; 
     text-shadow: none; 
     top: 0; 
     cursor: default; 
     display: block; 
     left: 0; 
     position: absolute;} 

    .irs-max:after { 
     visibility: visible !important; 
     display: block; 
     background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; 
     border-radius: 3px; 
     color: #333; 
     font-size: 10px; 
     line-height: 1.333; 
     padding: 1px 3px; 
     text-shadow: none; 
     top: 0; 
     cursor: default; 
     display: block; 
     right: 0; 
     position: absolute;} 

"), 

sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%') 

) 

server <- function(input, output, session){ 

    } 

shinyApp(ui = ui, server=server) 

Answer 4

這可以通過操縱ionRangeSlider的prettify函數，它返回滑塊標籤中可選擇的滑塊的值的範圍內的每個值來完成。只需在您的應用程序創建一個文件labels.js如下（輸入您的滑塊ID，並在標記點最低可選值），並附includeScript('slider.js')：

$(document).ready(function() { 
    /** 
    Custom slider labels 
    **/ 

    // Convert numbers of min to max to "lower" and "higher" 
    function returnLabels(value) { 
     // remove label of selected 
     $('.my_slider').find('.irs-single').remove(); 
    // $('.my_slider').find('.irs-grid-text').remove(); // this is an alternative to ticks=F 

     if (value === 0){ # enter your lowest slider value here 
     return "lower"; 
     }else{ 
     return "higher"; 
     } 
    } 

    var someID = $("#YOUR_SLIDER_ID").ionRangeSlider({ #enter your shiny slider ID here 
      prettify: returnLabels, 
      force_edges: true, 
      grid: false 
     }); 
    }); 

然後，包你的滑塊與類「my_slider」一個div：

div(class="my_slider", # to be able to manipulate it with JQuery 
     sliderInput("YOUR_SLIDER_ID", 
        "Slider Value:", ticks = F, 
        min = 0, max = 50, value = 30)) 

結果如下所示：

修復bugŧ帽子標籤消失選擇最小/最大值時，在您的應用程序定義此UIoutput：

# Just a small fix to reactivate Labels when Min/Max value is chosen 
output$fixSlider <- renderUI({  
# declare dependency on slider 
input$YOUR_SLIDER_ID  
minVis <- "$('.my_slider').find('.irs-min').attr('style','visibility: visible');" 
maxVis <- "$('.my_slider').find('.irs-max').attr('style','visibility: visible');" 
return(tags$script(paste(minVis,maxVis))) 
}) 

不客氣:-)