rstudio/shiny

Can't move double-ended range slider if from-handle is set to max

Closed this issue · 3 comments

stewerner commented

Currently, when moving the from-handle of a double-ended range slider to its maximum value it can't be dragged to another position (as it is covered by the to-handle). The only way out is clicking somewhere else. This is related, however this particular edge case is very unintuitive:

screen

I've found a workaround, however I think a general UI-only solution would be preferable:

library(shiny)

slider_max <- 100

ui <- fluidPage(
  tags$head(
    tags$script("
      Shiny.addCustomMessageHandler('set_z-index', function(msg) {
        const elem = document.getElementById(msg.inputId).parentNode.querySelector('.irs-handle.from');
        elem.style.zIndex = msg.zindex;
      });
    ")
  ),
  sliderInput(
    inputId = "vanilla_range", 
    label = "Current behaviour:", 
    min = 0, 
    max = slider_max,
    value = c(30, 70),
    step = 1
  ),
  sliderInput(
    inputId = "modified_range", 
    label = "Desired behaviour:", 
    min = 0, 
    max = slider_max,
    value = c(30, 70),
    step = 1
  )
)

server <- function(input, output, session) {
  observeEvent(input$modified_range, {
    if(round(slider_max/input$modified_range[1]) == 1L){
      session$sendCustomMessage("set_z-index", list(inputId = "modified_range", zindex = "3"))
    } else {
      session$sendCustomMessage("set_z-index", list(inputId = "modified_range", zindex = "2"))
    }
  })
}

shinyApp(ui, server)
ismirsehregal commented

Maybe this can be solved by an update of the plugin?

Playing with the examples here, this issue isn't present.

gadenbuie commented

Thanks both. We were already at the latest version; this ended up being a small issue with the CSS applied by Shiny to the ionRangeSlider component. If you can, try using the version in #4131 and let me know if your issue persists.

pak::pak("rstudio/shiny@gadenbuie/issue4130")
  • 🚀1
stewerner commented

@gadenbuie thanks for the swift investigation!

I can confirm that the problem no longer exists after I installed the updated version.

Kind regards

  • 👍1