user defined tickmark labels in inputSlider in shiny

Question

sliderInput("myslider", "Slider:", min=1, max=100, value=6)

returns a slider with tickmark labels at 1, 11, 21, 31,...,91 and 100.

I would love the heuristic that is determining these tickmark labels to return more reasonable values of 1, 10, 20, 30,, ...90, 100.

I imagine this comes up a lot, as a slider from 1 to 100 is a very common one. (If you set min=0, it does show the desired tickmark labels, but in many apps, you don't want the input to be 0.

Currently, there is no way to supply user-defined tickmark labels to sliderInput. Is there a workaround just for the labels?

A similar question is posted here, but it talks about creating user-defined tick marks, not the labeling.

If you manage to change the ticks labels, you can then decode them in the `server` — HubertL, Oct 25 '16 at 21:01
I have an answer from a long time ago that isn't pretty but works - [see here](http://stackoverflow.com/questions/30502870/shiny-slider-on-logarithmic-scale/31066997#31066997). I'm almost certain there should be a nicer way, this was written when I was new with shiny — DeanAttali, Oct 26 '16 at 00:57
Actually the answer I linked to is not identical to this question, but it might help you — DeanAttali, Oct 26 '16 at 02:40
Unfortunately, there is no easy way to do this in Shiny, because there is no easy way to do this in the underlying library ion Range Slider (https://github.com/IonDen/ion.rangeSlider). The value of the ticks ("grid values" in ion Range Slider lingo) is always determined as a function of either the step size (ex: `step: 500, grid: true, grid_snap: true`) or the number of ticks desired, given the `min` and `max` params (ex: min: 0, max: 10000, grid: true, grid_num: 10`). This is why you can change the grid values by changing the min/max values. — Bárbara Borges, Oct 26 '16 at 12:00

score 0 · Answer 1 · answered Sep 03 '20 at 15:36

In https://groups.google.com/forum/#!topic/shiny-discuss/AeAzR4p2h1g is a solution of this problem:

ui <- pageWithSidebar(
  headerPanel("Slider labels"),
  sidebarPanel(
    uiOutput("slider")
  ),
  mainPanel()
)

server <- function(input, output) {
  output$slider <- renderUI({

      args       <- list(inputId="foo", label="slider :", ticks=c(90,95,99,99.9), value=c(2,3))

      args$min   <- 1
      args$max   <- length(args$ticks)

      if (sessionInfo()$otherPkgs$shiny$Version>="0.11") {
        # this part works with shiny 1.5.0
        ticks <- paste0(args$ticks, collapse=',')
        args$ticks <- T
        html  <- do.call('sliderInput', args)

        html$children[[2]]$attribs[['data-values']] <- ticks;

      } else {
        html  <- do.call('sliderInput', args)    
      }

      html
    })

}

runApp(list(ui = ui, server = server))

Translated to a slider from 1 to 100, this gives a slider with tickmarks that are akward. — Bernhard Klingenberg, Oct 25 '20 at 20:48
To clarify, I don't see how I can nice tick mark labels AND a step size of 1. (The tick mark labels are a nice 0 to 100, though, when you set ticks=seq(0,100,10). — Bernhard Klingenberg, Oct 25 '20 at 20:54

score 0 · Answer 2 · answered Jun 16 '22 at 12:44

By now this can be done using htmltools::tagQuery:

library(shiny)
library(htmltools)

ui <- basicPage(h1("Custom sliderInput ticks"),
                {
                  customTicks <- seq_len(15)
                  customSlider <- sliderInput(
                    inputId = "sliderinput",
                    label = "sliderInput",
                    min = 1,
                    max = max(customTicks),
                    value = 7,
                    step = 1,
                    ticks = TRUE
                  )
                  tagQuery(customSlider)$find("input")$addAttrs("data-values" = paste0(customTicks, collapse = ", "))$allTags()
                })

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

shinyApp(ui = ui, server = server)

user defined tickmark labels in inputSlider in shiny

2 Answers2