如何在 Shiny 中包含 2 个朝相反方向移动的滑块？

Question

我需要创建一个需要 2 个滑块的 UI。一种按默认方式从左到右移动，另一种从右到左移动。

我能够根据这篇文章 如何将滑块着色为值右侧而不是左侧的闪亮颜色，从右到左创建一个滑块？

但是，一旦我包含此代码，另一个滑块似乎也只能从右向左移动。我怎样才能进行更改以使两个滑块以相反的动作移动？

Answer 1

像这样的东西，请注意，这.js-irs-1是第二个滑块，.js-irs-0将是第一个

library(shiny)
my_max <- 10

ui <- fluidPage(
    tags$head( tags$style( type = "text/css", '
      .js-irs-1 .irs-line-mid{
        background: #428bca ;
        border: 1px solid #428bca ;
      }
      .js-irs-1 .irs-line-right{
        background: #428bca ;
      }
      .js-irs-1 .irs-bar {
        background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
        border-top: 1px solid #CCC ;
        border-bottom: 1px solid #CCC ;
      }
      .js-irs-1 .irs-bar-edge {
        background: inherit ;
        border: inherit ;
      }

    ')), 
    sliderInput("slider1", "Slider 1",min = 0, max = my_max, value = 2, step = 1),
    sliderInput("slider2", "Slider 2",min = 0, max = my_max, value = 8, step = 1)
    
)
server <- function(input, output, session){
    
    observeEvent(input$slider1,{
        updateSliderInput(session, "slider2", value = my_max-input$slider1)
    })
    
    observeEvent(input$slider2,{
        updateSliderInput(session, "slider1", value = my_max-input$slider2)
    })
    
}
shinyApp(ui = ui, server=server)

要更改滑块的方向，您只需更改.js-irs-00 为第一个滑块，1 为第二个滑块，2 为第三个滑块，依此类推...

library(shiny)
my_max <- 10

ui <- fluidPage(
    tags$head( tags$style( type = "text/css", '
      .js-irs-0 .irs-line-mid{
        background: #428bca ;
        border: 1px solid #428bca ;
      }
      .js-irs-0 .irs-line-right{
        background: #428bca ;
      }
      .js-irs-0 .irs-bar {
        background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
        border-top: 1px solid #CCC ;
        border-bottom: 1px solid #CCC ;
      }
      .js-irs-0 .irs-bar-edge {
        background: inherit ;
        border: inherit ;
      }

    ')), 
    sliderInput("slider1", "Slider 1",min = 0, max = my_max, value = 2, step = 1),
    sliderInput("slider2", "Slider 2",min = 0, max = my_max, value = 8, step = 1)
    
)
server <- function(input, output, session){
    
    observeEvent(input$slider1,{
        updateSliderInput(session, "slider2", value = my_max-input$slider1)
    })
    
    observeEvent(input$slider2,{
        updateSliderInput(session, "slider1", value = my_max-input$slider2)
    })
    
}
shinyApp(ui = ui, server=server)