Change color of Slider Text Input Widget in Shiny R?-CodePudding

Is there a way to change the color of the following slide of the CRAN package shinyWidgets? Thanks in advance. I need to do it also in within the update function.

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  br(),
  sliderTextInput(
    inputId = "mySliderText",
    label = "Month range slider:",
    choices = month.name,
    selected = month.name[c(4, 7)]
  ),
  verbatimTextOutput(outputId = "result")
)

server <- function(input, output, session) {
  output$result <- renderPrint(str(input$mySliderText))
}

shinyApp(ui = ui, server = server)

CodePudding user response：

This can be achieved with CSS applied to the input. Here I changed the color properties of the CSS class of the input. Which mean it will apply to all slider text input of your app. If you want to apply the color only on one input, you need to apply the CSS properties on the class children of the input ID.

The easiest way to find out how to change an element in CSS is to play with the browser inspector (CTRL shift i) when your app is running.

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  tags$style(HTML("
    .irs--shiny .irs-bar {
      background: blueviolet;
      border-top: 1px solid blueviolet;
      border-bottom: 1px solid blueviolet;
    }
    .irs--shiny .irs-to, .irs--shiny .irs-from {
      background-color: blueviolet;
    }
    .irs--shiny .irs-handle {
      border: 1px solid #c41818;
      background-color: #c41818;
    }")),
  
  
  br(),
  sliderTextInput(
    inputId = "mySliderText",
    label = "Month range slider:",
    choices = month.name,
    selected = month.name[c(4, 7)]
  ),
  verbatimTextOutput(outputId = "result")
)

server <- function(input, output, session) {
  output$result <- renderPrint(str(input$mySliderText))
}

shinyApp(ui = ui, server = server)