sliderInput Max/Min Text Labels

Question

I am currently working on a dashboard with multiple sliderInputs. Is it possible to replace the max and min labels with text? For example, my min = 1 and max = 10. I want to keep the scale from 1 to 10 while having the slider labels appear as "sooner" and "later" respectively.

Thanks!

Answer 1

The short answer here is no, sadly; short of hacking through the underlying code in JavaScript, there is no way to relabel slider ticks (though there are a few formatting parameters).

However, you can hack the labels into the widget label by passing it an HTML object styled with inline CSS. Make sure to set the width of the widget itself so everything lines up, and the result is not too bad:

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

this can be done by manipulating the prettify function of ionRangeSlider, which returns the slider labels for each value in the range of selectable slider values. Simply create a file slider.js as following (enter your slider ID and lowest selectable value at marked spots) and include it in your app with 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
        });
    });

Then, wrap your slider in a div with class "my_slider":

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)

The result looks as follows:

To fix the bug that labels disappear when min/max value is selected, define this UIoutput in your app:

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

You're welcome :-)

Answer 3

Maybe somethin like this. Just note that the slider will return an index starting from zero.

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