CODEWITHSUNDEEP
rshinyslider
Tinniam V. Ganesh
Tinniam V. Ganesh

Reputation: 2079

How to include 2 sliders which move in opposite directions in Shiny?

I need to create a UI where I need 2 sliders. One moves the default way from left to right and the other from right to left.

I was able to create a slider from right to left based on this post How to color the slider in shiny to the right of the value instead of to the left?

But once I include this code the other slider also seems to move only from right to left. How can I make changes so that the 2 sliders move in opposite action?

Upvotes: 1

Views: 575

Answers (2)

Marek Gierliński
Marek Gierliński

Reputation: 89

When I run this example, the second slider doesn't have blue line to the right: it does not have blue line at all, it is grey on both sides.

My SessionInfo:

R version 4.0.4 (2021-02-15)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.7

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shiny_1.6.0

loaded via a namespace (and not attached):
 [1] compiler_4.0.4    fastmap_1.1.0     ellipsis_0.3.1    magrittr_2.0.1    R6_2.5.0          promises_1.2.0.1  later_1.1.0.1    
 [8] htmltools_0.5.1.1 tools_4.0.4       Rcpp_1.0.6        digest_0.6.27     xtable_1.8-4      httpuv_1.5.5      lifecycle_1.0.0  
[15] mime_0.10         rlang_0.4.10

Upvotes: 1

Pork Chop
Pork Chop

Reputation: 29387

Something like this, note that the .js-irs-1 is the second slider, .js-irs-0 would be first

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)

enter image description here

To change the direction of the sliders, all you need to change is the .js-irs-0 with 0 being the first slider, 1 the second, 2 the third and so on... 
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)

Upvotes: 5

Related Questions