滑块输入最大/最小文本标签答案

【问题标题】：sliderInput Max/Min Text Labels滑块输入最大/最小文本标签
【发布时间】：2016-11-04 04:48:21
【问题描述】：

我目前正在开发具有多个滑块输入的仪表板。是否可以用文本替换最大和最小标签？例如，我的 min = 1 和 max = 10。我希望将比例保持在 1 到 10 之间，同时让滑块标签分别显示为“较早”和“较晚”。

谢谢！

【问题讨论】：

【解决方案1】：

很遗憾，这里的简短回答是否定的；如果没有破解 JavaScript 中的底层代码，就无法重新标记滑块刻度（尽管有一些格式参数）。

但是，您可以通过将带有内联 CSS 样式的 HTML 对象传递给小部件标签来将标签破解为小部件标签。确保设置小部件本身的宽度，以便所有内容都对齐，结果还不错：

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)

【讨论】：

现在就可以了。非常感谢！

【解决方案2】：

这可以通过操作 ionRangeSlider 的prettify 函数来完成，该函数返回可选滑块值范围内每个值的滑块标签。只需创建一个文件slider.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 中：

library(shiny)    
ui <- fluidPage(
  includeScript("slider.js"),
  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))      
)

server <- function(input, output) {}    
shinyApp(ui, server)

结果如下：

要修复选择最小值/最大值时标签消失的错误，请在您的应用中定义此 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)))
})

不客气:-)

【讨论】：

您的方法看起来很有希望，但我无法让它发挥作用。您能否提供一个复制粘贴的示例，包括 R 代码？另外：我想你的意思是 includeScript('labels.js')
谢谢朱利安。我确实添加了最小的闪亮应用程序代码。注意到我使用 # 表示 Javascript cmets，这是错误的（// 是正确的）。看看这是否能解决您的问题。
现在它对我有用。对 includeScript("slider.js") 的调用是在对 Shinypage (fluidpage) 的调用中进行的，这一点很重要。而且“YOUR_SLIDER_ID”前面的“#”也很重要;-)
另外：如果您将 if 子句替换为：if (value === 1){ /** enter your lowest slider value here **/ return "lower"; }else if (value === 50){/** enter your highest slider value here **/ return "higher"; } else return value;，则可以保留所选标签的标签（注释掉该行）

【解决方案3】：

也许是这样的。请注意，滑块将返回从零开始的索引。

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"]
    });
    });

【讨论】：

【解决方案4】：

我和你有同样的问题。不幸的是，Shiny 和 ionRangeSlider 都没有为此类更改提供简单的功能。在顽固地寻找一种更微妙的方式之后，我遇到了以下 CSS hack。（我也用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)

【讨论】：