Slider with gradient

[lidiamandre]

Hi all,

I'm new-ish to R Shiny. I'm trying to create an app and I wanted just one of my sliders to have a gradient, so for values close to 0 I want the slider to be red, but close to 1 to be green. My code is as follows:

ui <- fluidPage(
  titlePanel("Return Curve Estimation"),
  fileInput("data", label = "File input", accept = c(".csv", ".rds", ".txt"),
            buttonLabel = "Browse...", placeholder = "No file selected"),
  uiOutput("select_column_x"),
  uiOutput("select_column_y"),
  hr(),
  sidebarLayout(
    sidebarPanel(
      selectInput("analysis", "Choose Analysis:", 
                  choices = c("Exploratory Data Analysis", "Return Curve Estimation", "Angular Dependence Function")),
      uiOutput("rcinputs")
    ),
    mainPanel(
      uiOutput("analysis")
    )
  )
)



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

  output$rcinputs <- renderUI({
    if (input$analysis == "Return Curve Estimation") {
      tagList(
        withMathJax(),
        sliderInput("lengthw", "Number of angles \\(\\omega\\)",
                    min = 101, max = 1001, step = 100, value = 101),
        hr(),
        numericInput("probability", "Curve survival probability \\(p\\)", value = 0.001),
        hr(),
        selectInput("method", "Method to estimate \\(\\lambda(\\omega)\\)",
                    choices = list("hill", "cl")),
        hr(),
        sliderInput("qmarg1", "Marginal quantile for the Marginal transformation for the first variable",
                    min = 0.01, max = 0.99, step = 0.01, value = 0.95),
        sliderInput("qmarg2", "Marginal quantile for the Marginal transformation for the second variable",
                    min = 0.01, max = 0.99, step = 0.01, value = 0.95),
        selectInput("constrainedshape", "Constrained the shape parameter of the GPD fit",
                    choices = c(TRUE, FALSE)),
        hr(),
        sliderInput("q", "Marginal quantile for the min-projection variable and/or Hill estimator",
                    min = 0.01, max = 0.99, step = 0.01, value = 0.95),
        sliderInput("qalphas1", "Marginal quantile used for the conditional extremes model for the first variable",
                    min = 0.01, max = 0.99, step = 0.01, value = 0.95),
        sliderInput("qalphas2", "Marginal quantile used for the conditional extremes model for the second variable",
                    min = 0.01, max = 0.99, step = 0.01, value = 0.95),
        hr(),
        numericInput("k", "Polynomial degree", value = 7),
        hr(),
        selectInput("constrained", "Incorporate knowledge of conditional extremes parameters",
                    choices = c(FALSE, TRUE)),
        hr(),
        numericInput("tol", "Convergence tolerance for the composite maximum likelihood procedure",
                    value = 0.0001),
        hr(),
        numericInput("parinit", "Initial values for the parameters \\(\\beta\\)",
                     value = 0)
      )
    }
    else if(input$analysis == "Angular Dependence Function") {
      ...
  })
  
 ...
}

I wanted the slider for "qmarg1" to have this gradient. Many thanks

[mduvekot]

Here's a very simple example:

library(shiny)

ui <- fluidPage(
  tags$style( HTML( '.irs--shiny .irs-line { background: linear-gradient(to right, #ff0e0e 0%, #37b61e 100%);}
                    .irs--shiny .irs-bar { background: none;}
                    ')),
  sliderInput("obs", "Number of observations:", min = 0, max = 1000, value = 500),
  plotOutput("distPlot")
)

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

shinyApp(ui, server)

[lidiamandre]

That changes all my sliders, I just wanted the slider identified with qmarg1 to be coloured

[mduvekot]

it's css, you can change the selector to whatever you want to select:

#obs-label ~ span span.irs-line

[lidiamandre]

@mduvekot

tags$style( HTML( '.irs--shiny .irs-line { background: linear-gradient(to right, #ff0e0e 0%, #37b61e 100%);}
                    .irs--shiny .irs-bar { background: none;}
                    '))

Sorry, I'm really struggling to do this, it is not working. I never coded in css so that also doesn't help

[mduvekot]

Does my example work? (it does for me) If you use

library(shiny)

ui <- fluidPage(
  tags$style( HTML( '#obs-label ~ span span.irs-line { background: linear-gradient(to right, #ff0e0e 0%, #37b61e 100%);}
                    .irs--shiny .irs-bar { background: none;}
                    ')),
  sliderInput(inputId = "obs", label = "Number of observations:", min = 0, max = 1000, value = 500),
  sliderInput(inputId = "foo", label = "Ignore me", min = 0, max = 1, value = .5),
  
  plotOutput("distPlot")
)

# Server logic
server <- function(input, output) {
  output$distPlot <- renderPlot({
    hist(rnorm(input$obs))
  })
}

# Complete app with UI and server components
shinyApp(ui, server)

the css selector can be read as from right to-left as"select the HTML element that is a span with class .irs-line that is the child of another span that is the sibling of an element with the id "obs-label". The way I normally check my CSS selector is with the SelectorGadget that you can find at https://selectorgadget.com/

[lidiamandre]

@mduvekot

tags$style(

It did, thank you so much, it is now working as I wanted!