Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

R Shiny - Change direction color sliderInput

I want to change the direction where the color in the sliderInput is by default. For example:

ui <- fluidPage(
  fluidRow(
    column(width = 6,
      sliderInput( inputId = "mySlider", 
                   label = "Some text",
                   min = 0, max = 50,
                   value = 10
      )
    )
  )
)

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

Instead of having the blue color filled from 0 to 10 (at initial values), filling from 10 to 50.

I saw that noUiSliderInput from the shinyWidgets package allows changing the direction, but it changes everything not just the color.

Is there an easy way to do this?

like image 935
Qin Avatar asked Dec 11 '25 07:12

Qin


1 Answers

Thanks to starja answer, I finally found how to change (one or several sliders) with the exact same appearance as sliderInput. Here is the code:

library(shiny)

css <- "
#reverseSlider .irs-bar {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
}
#reverseSlider .irs-bar-edge {
    border: 1px solid #ddd;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
    border-right: 0;
}
#reverseSlider .irs-line {
    background: #428bca;
    border: 1px solid #428bca;
}
"

ui <- fluidPage(
  fluidRow(
    column(width = 6,
           tags$style(type='text/css', css),
           div(id = "reverseSlider", 
               sliderInput( inputId = "mySlider1", 
                            label = "Some text",
                            min = 0, max = 50,
                            value = 10 )
           ),
           sliderInput( inputId = "mySlider2", 
                        label = "Some other text",
                        min = 0, max = 50,
                        value = 10 )
    )
  )
)

server <- function(input, output, session) {}
shinyApp(ui, server)
like image 196
Qin Avatar answered Dec 12 '25 20:12

Qin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!