Controllo dell'aspetto di un cursoreInput in Shiny

Question

Sto provando a controllare le dimensioni e l'aspetto di un cursoreInput in Shiny. Nello specifico, l'ho già ingrandito e allargato, oltre a modificare i colori di sfondo del cursore. Voglio fare le estremità del cursore quadrato, rimuovere i segni di graduazione che appaiono sotto il cursore e quindi posizionare i valori (1:10) in bianco all'interno del corpo della barra. Ho provato a manipolare il CSS, ma ho avuto solo un moderato successo. Il cursore è più grande e più largo, ma un lato della barra è squadrato e non riesco a spostare il testo. Ovviamente, le mie abilità CSS sono sotto-par. Ho già consultato vari tutorial, ma non riesco a decifrarli. Qualsiasi assistenza sarebbe molto apprezzata, poiché sono davvero bloccato.

Ecco che cosa ho provato:

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

Come è che?

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 cursore quare è irs.bar, .irs-bar-edge {border-radius: 0px}.
• Rimuovere i tick impostando .irs-grid-pol {display: none;}.
• I numeri di spunta in bianco e all'interno sono .irs-grid-text {color: white; bottom: 17px; z-index: 1} dove z-index rende i numeri uno strato sopra la barra stessa.
• Ho anche aggiunto .irs-slider {width: 30px; height: 30px; top: 22px;} per regolare la manopola del cursore.