R Shiny - Change direction color sliderInput

Question

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?

Answer 1

The appearance is defined by the CSS file for the sliderInput, I found the custom shiny theme here. Then I just changed the colours for the background and the slider bar. Unfortunately, my CSS skills are very limited, so I couldn't recreate the 3D effect of the grey background, now it's just grey.

library(shiny)
ui <- fluidPage(
  fluidRow(
    column(width = 6,
           tags$head(tags$style(HTML("
           .irs-bar {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #ddd;
}
    .irs-bar-edge {
        border: 1px solid #ddd;
        background: #ddd;
    }
.irs-line {
    background: #428bca;
    border: 1px solid #428bca;
}"))),
           sliderInput( inputId = "mySlider", 
                        label = "Some text",
                        min = 0, max = 50,
                        value = 10
           )
    )
  )
)

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