Control the appearance of the slider in Shiny

Question

I am trying to control the size and appearance of sliderInput in Shiny. In particular, I already made it bigger and wider, and also changed the background colors of the slider. I want to make the ends of the square of the slider, delete the labels that appear under the slider, and then put the values ​​(1:10) in white inside the panel body. I tried to manipulate CSS, but only had moderate success. The slider is larger and wider, but one side of the panel is square, and I cannot move the text. Obviously my CSS skills are sub-pairs. I have already consulted with various textbooks, but I can’t crack them. Any help would be greatly appreciated as I was really stuck.

Here is what I tried:

ui <- fluidPage( tags$style(HTML(".irs-bar {width: 100%; height: 25px; background: black; border-top: 1px solid black; border-bottom: 1px solid black;}")), tags$style(HTML(".irs-bar-edge {background: black; border: 1px solid black; height: 25px; border-radius: 15px 15px 15px 15px;}")), tags$style(HTML(".irs-line {border: 1px solid black; height: 25px;}")), tags$style(HTML(".irs-grid-text {font-family: 'arial'; color: black}")), tags$style(HTML(".irs-max {font-family: 'arial'; color: black;}")), tags$style(HTML(".irs-min {font-family: 'arial'; color: black;}")), tags$style(HTML(".irs-single {color:black; background:#6666ff;}")), uiOutput("testSlider") ) server <- function(input, output, session){ output$testSlider <- renderUI({ sliderInput( inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%' ) # close slider input }) # close renderUI } shinyApp(ui = ui, server=server) 

Answer 1

Like this?

  ui <- fluidPage( tags$style(type = "text/css", " .irs-bar {width: 100%; height: 25px; background: black; border-top: 1px solid black; border-bottom: 1px solid black;} .irs-bar-edge {background: black; border: 1px solid black; height: 25px; border-radius: 0px; width: 20px;} .irs-line {border: 1px solid black; height: 25px; border-radius: 0px;} .irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;} .irs-grid-pol {display: none;} .irs-max {font-family: 'arial'; color: black;} .irs-min {font-family: 'arial'; color: black;} .irs-single {color:black; background:#6666ff;} .irs-slider {width: 30px; height: 30px; top: 22px;} "), uiOutput("testSlider") ) server <- function(input, output, session){ output$testSlider <- renderUI({ sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%') }) } shinyApp(ui = ui, server=server) 

• The end of the quadrant of the slider irs.bar, .irs-bar-edge {border-radius: 0px} .
• .irs-grid-pol {display: none;} setting .irs-grid-pol {display: none;} .
• .irs-grid-text {color: white; bottom: 17px; z-index: 1} numbers in white and inside .irs-grid-text {color: white; bottom: 17px; z-index: 1} .irs-grid-text {color: white; bottom: 17px; z-index: 1} .irs-grid-text {color: white; bottom: 17px; z-index: 1} , where z-index makes the numbers one layer above the bar itself.
• I also added .irs-slider {width: 30px; height: 30px; top: 22px;} .irs-slider {width: 30px; height: 30px; top: 22px;} .irs-slider {width: 30px; height: 30px; top: 22px;} to adjust the slider knob.

Answer 2

K, Rohde How to set marks to be below the panel? .irs-grid-pol {}