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))) 
}) 

不客气:-)