Parlak

Question

'da bir kaydırıcı girişinin görünümünü denetleme Parlaklıktaki bir kaydırma çubuğunun boyutunu ve görünümünü denetlemeye çalışıyorum. Spesifik olarak, daha büyük ve daha geniş yaptık ve kaydırıcının arka plan renklerini değiştirdim. Kaydırıcı karesinin uçlarını yapmak, kaydırıcı altında görünen onay işaretlerini kaldırmak ve daha sonra değerleri (1:10) çubuğun gövdesinin içindeki beyaza yerleştirmek istiyorum. CSS'yi manipüle etmeye çalıştım, ancak sadece ılımlı bir başarı elde ettim. Kaydırıcı daha büyük ve daha geniştir, ancak çubuğun bir tarafı karedir ve metni taşıyamıyorum. Açıkçası, CSS becerilerim alt par. Zaten çeşitli öğreticilere danıştım, ama onları çatlatamam. Gerçekten sıkışmış olduğum için herhangi bir yardım büyük ölçüde takdir edilecektir. İşte

Ben çalıştığım buydu:

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

Nasıl yani? sürgü Quare arasında

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) 

• Uçlar irs.bar, .irs-bar-edge {border-radius: 0px} olup.
• Onayları .irs-grid-pol {display: none;} ayarlanarak kaldırın.
• Numaraları beyaz ve içeride z-index, sayıların çubuğun üzerinde bir katman olmasını sağlar.
• Ayrıca, sürgü düğmesini ayarlamak için .irs-slider {width: 30px; height: 30px; top: 22px;} ekledim.