How to Color Sliderbar (Sliderinput)

Change colour for sliderInput

This is similar to @LyzandeR answer, but uses simpler code and doesn't use any additional packages

library(shiny)

mycss <- "
.irs-bar,
.irs-bar-edge,
.irs-single,
.irs-grid-pol {
  background: red;
  border-color: red;
}
"

ui <- fluidPage(
  tags$style(mycss),
  sliderInput("num", "Number", 0, 10, 5)
)

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

shinyApp(ui, server)

Change color of shiny sliderInput with range

You want the following added in as well:

.js-irs-0 .irs-to,.js-irs-0 .irs-from

Dynamically colored sliderInput

Use renderUI, and control the conditions in color() any way you want

rm(list = ls())
library(shiny)
ui <- fluidPage(

    sliderInput("slider1", "Slider 1",min = 0, max = 10, value =c(4,8), 
                 step = 1),

    uiOutput("abc")

)
server <- function(input, output, session){

    color <- reactive({
       if(input$slider1[1] < 4 || input$slider1[2] > 8 ){
         tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-
               edge, .js-irs-0 .irs-bar {background: red}"))
        }else{
          tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-
                  edge, .js-irs-0 .irs-bar {background: lightgreen}"))
        }
    })

  output$abc <- renderUI({ 
       color()
  })

}
shinyApp(ui = ui, server=server)

How to change slider bar color using setSliderColor on multiple sliders when using renderUI in R Shiny

i got your code running by combining two color-switches into one setSliderColor(). Like this, its not that comfortable to change on different conditions, though.

library(shiny)
library(shinyWidgets)
library(DT) # added DT lib

ui <- fluidPage(
  
  
  sidebarLayout(
    sidebarPanel(
      textInput(inputId = "greeting",
                label = "Say hi!",value = "hi!"), #to not always click
      actionButton(inputId = "submit", 
                   label = "Submit"),
      
      uiOutput("num_slider1"),
      uiOutput("num_slider2"),
      
      
    ),
    mainPanel(DT::DTOutput("table"))
  ))

server <- function(input, output) {
  
  data <- reactive({
    req(input$submit |  0==0) #to not always click
    if(input$greeting == "hi!") {
      tibble(name = c("Justin", "Corey", "Sibley"),
             grade = c(50, 100, 100))}
  })
  
  output$table <- renderDT({
    datatable(data())
  })
  
  
  output$num_slider1 <- renderUI({
    
    if(length(data()) > 0) {
      
      fluidPage(setSliderColor(c("#CA001B","green"), sliderId = c(1,2)), #put vectors here to change the colors
                sliderInput(inputId = "num_slider1",
                            label = "Filter by Number",
                            min = 1,
                            max = 10,
                            value = c(1, 10)))}
    
  })
  
  output$num_slider2 <- renderUI({
    
    if(length(data()) > 0) {
      #This one won't change color
      #fluidPage(setSliderColor("yellow", sliderId = 2),
                sliderInput(inputId = "num_slider2",
                            label = "Filter by Number",
                            min = 100,
                            max = 10000,
                            value = c(100, 10000)))}
    
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Change sliderbar color with setSliderColor within reactive output

The function is just not designed to work with renderUI(). The arguments need to be updated in each call.

a quick fix would be preallocate very large vectors that the user will never reach (like 1 million) or use reactiveValues() like this:

note: The sliders will turn green when "hi!" is passed as an input.

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
    
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit"),
            
            uiOutput("num_slider"),
            sliderInput(inputId = "num_filter1",
                        label = "Now it works!",
                        min = 1,
                        max = 10,
                        value = c(1, 10))
            
        ),
        mainPanel()
    ))

server <- function(input, output) {
    
    i <- reactiveValues()
    i$color <- 1
    i$color_name <- 'green'
    
    
    observeEvent(input$submit, {
        
        i$color <- c(i$color, i$color[[length(i$color)]] + 1)
        i$color_name <- c(i$color_name, 'green')
        
        #left for demonstration purposes
        print(i$color)
        print(i$color_name)
        
        shiny::req(input$greeting)
        shiny::req(input$submit)
        
        
        output$num_slider <- renderUI({

            if(input$greeting == "hi!") {
                
                fluidPage(setSliderColor(i$color_name, sliderId = i$color),
                          sliderInput(inputId = "num_filter2",
                                      label = "Filter by Number",
                                      min = 1,
                                      max = 10,
                                      value = c(1, 10)))}
            
        }) }) 
    
}

# Run the application 
shinyApp(ui = ui, server = server)

How to color the slider in shiny to the right of the value instead of to the left?

There's probably a better way, but here's a quick css option:

library(shiny)
shinyApp( 
  ui = fluidPage(

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

    ')), 

    sliderInput( "slider", label  = "Slider", min = 0, max = 100, value = 50)
  ), server = function(input,output){} 
)

R Shiny - Change direction color sliderInput

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)

Add different static colors for sliderbar in shiny dashboard

Oh, then i misinterpreted your question. You can achieve this also by using css-commands and correct selectors:

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(skin = "black",
                    dashboardHeader(title = "test"),
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("Complete", tabName = "comp"))),
                    dashboardBody(
                      inlineCSS(".irs-line-left { background-color: red; width: 40%;}
                                 .irs-line-mid { background-color: blue; width: 20%; left: 40%;}
                                 .irs-line-right { background-color: green; width: 40%; left: 60%;}
                                "
                                ),

                      shinyjs::useShinyjs(),
                      tabItems(
                        tabItem(tabName = "comp",
                                fluidRow(
                                  sliderInput("range_var", "", value = c(90,100), min = 0, max = 100, width = '200%'))))))

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

shinyApp(ui, server)

---

Related Topics