输入最大/最小文本标签

Question

我目前正在使用具有多个sliderInputs的仪表板。是否可以将max和min标签替换为文本？例如，我的min = 1和max =10。我希望比例尺从1到10，同时使滑块标签分别显示为“较早”和“较晚”。

谢谢！

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

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

不客气 ：-）