Shiny slider new design

[AbhishekHP]

Hi Shiny experts,

Shiny has quick implementation of slider with min, max arguments.
But since the data trend needs to be shown, slider is used for analysing trend quickly.
**But this slider seems to be misleading because as shown in the image, even though I specify Choose an year, it seems that data used is from 2014-2018 but I am using only 2018 here.
Similarly which ever the slider head points, that specific year data is all I am using to display the data.

Is there way to remove this ** Blue** ink from the slider ?
Because I want slider head to move but without ink so that there wont be misinterpretation that the data is considered from 2014 instead only the year pointed by Slider head is the right 1.
Something like this 1.

Thanks in advance,
Abi

[nteetor]

You can modify the background and border color of the slider's bar using CSS. In general I would recommend putting your CSS styles in a separate file. In the below example I have included the styles inline.

library(shiny)

shinyApp(
  ui = fluidPage(
    singleton(
      tags$head(
        tags$style(
          ".irs-bar {",
          "  border-color: transparent;",
          "  background-color: transparent;",
          "}",
          ".irs-bar-edge {",
          "  border-color: transparent;",
          "  background-color: transparent;",
          "}"
        )
      )
    ),
    sliderInput(
      label = "Sample slider",
      inputId = "sample",
      min = 2014,
      max = 2018,
      value = 2016,
      sep = ""
    )
  ),
  server = function(input, output) {
    
  }
)

I hope this helps.

[AbhishekHP]

Thanks a ton for quick answer.
I tried to incorporate your code but it seems to give an error:
May be because:

1. Singleton should be applied only within Fluid page ? not within Sidebar ?
2. Other buttons are also involved : Radio/Select
3. More than 1 slider involved
4. Other CSS present already for ConditionalPanel ?

Please guide me to implement your slider design.

                                 sidebarMenu(id= "sidebarmenu",
                                  menuItem(h3("some_comparison"),
                                           tabName = "SpecficTab"
                                  ),
                                  conditionalPanel(
                                    "input.sidebarmenu == 'SpecficTab'",
                                    div(style="display: inline-block;vertical-align:top; width: 120px;",
                                        selectInput(........# Code relevant to select button...)
                                    ),
                                    radioButtons(........# Code relevant to radio button...),
# Added your code here to update the slider design
                                    singleton(
                                      tags$head(
                                        tags$style(
                                          ".irs-bar {",
                                          "  border-color: transparent;",
                                          "  background-color: transparent;",
                                          "}",
                                          ".irs-bar-edge {",
                                          "  border-color: transparent;",
                                          "  background-color: transparent;",
                                          "}"
                                        )
                                      )
                                    ),
                                    sliderInput("slider1",
                                               min = 1,  max = 200,  value = 200),
                                    sliderInput("slider2",
                                                       min = 1,  max = 25, value = 1)
                                  )
                      )

[DGranjon]

Hi,

Have a look at https://github.com/dreamRs/shinyWidgets/blob/master/R/setSliderColor.R and https://github.com/dreamRs/shinyWidgets/blob/master/R/chooseSliderSkin.R

library(shiny)
library(shinyWidgets)
ui <- fluidPage(
  chooseSliderSkin("Flat", color = "#112446"),
  sliderInput("obs", "Customized single slider:",
              min = 0, max = 100, value = 50
  ),
  sliderInput("obs2", "Customized range slider:",
              min = 0, max = 100, value = c(40, 80)
  ),
  sliderInput("obs3", "An other slider:",
              min = 0, max = 100, value = 50
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {

  output$distPlot <- renderPlot({
    hist(rnorm(input$obs))
  })
}

shinyApp(ui, server)

and

library(shiny)
library(shinyWidgets)

ui <- fluidPage(

  # only customize the 2 first sliders and the last one
  # the color of the third one is empty
  setSliderColor(c("DeepPink ", "#FF4500", "", "Teal"), c(1, 2, 4)),
  sliderInput("obs", "My pink slider:",
              min = 0, max = 100, value = 50
  ),
  sliderInput("obs2", "My orange slider:",
              min = 0, max = 100, value = 50
  ),
  sliderInput("obs3", "My basic slider:",
              min = 0, max = 100, value = 50
  ),
  sliderInput("obs3", "My teal slider:",
              min = 0, max = 100, value = 50
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {

  output$distPlot <- renderPlot({
    hist(rnorm(input$obs))
  })
}

shinyApp(ui, server)

[nteetor]

Great question. I was not clear enough about where to put these styles in a larger application. Placing the styles at the start of your UI is probably best and for simplicity we'll drop the singleton() and tags$head().

fluidPage/fixedPage(
  tags$style(
    ".irs-bar {",
    "  border-color: transparent;",
    "  background-color: transparent;",
    "}",
    ".irs-bar-edge {",
    "  border-color: transparent;",
    "  background-color: transparent;",
    "}"
  ),

  # rest of the application UI

  sliderInput(...)
)

This is also why I would encourage using a separate CSS file for styles. You can checkout this article https://shiny.rstudio.com/articles/css.html for more on how to incorporate CSS styling into a shiny application.

[AbhishekHP]

Excellent Nathan :). Your code works
Thanks a ton.

[AbhishekHP]

Thanks for Idea. Actually, I was not into changing colors but to remove colors in the slider.