Control the appearance of a sliderInput in Shiny

Question

I am trying to control the size and look of a sliderInput in Shiny. Specifically, I have already made it bigger and wider, as well as altered the background colors of the slider. I want to make the ends of the slider square, remove the tick marks that appear under the slider, and then place the values (1:10) in white inside the body of the bar. I've tried to manipulate the CSS, but have only had moderate success. The slider is bigger and wider, but one side of the bar is squared off, and I am unable to move the text. Obviously, my CSS skills are sub-par. I have already consulted various tutorials, but cannot crack them. Any assistance would be greatly appreciated, as I am truly stuck.

Here's what I've 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

How is that?

 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)

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