在Shiny中控制sliderInput的外觀

Question

我試圖控制Shiny中的sliderInput的大小和外觀。 具體來說，我已經使它變得更大更寬，並且改變了滑塊的背景顏色。 我想使滑塊的末端成為正方形，刪除滑塊下方出現的刻度線，然后將值（1:10）放在條形體內的白色中。 我試圖操縱CSS，但只取得了一定的成功。 滑塊更大更寬，但是條形的一側是方形的，我無法移動文本。 顯然，我的CSS技能低於標准。 我已經咨詢了各種教程，但無法破解它們。 非常感謝任何幫助，因為我真的被困住了。

這是我嘗試過的：

 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

那個怎么樣？

 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)

• 滑塊irs.bar, .irs-bar-edge {border-radius: 0px}是irs.bar, .irs-bar-edge {border-radius: 0px} 。
• 通過設置.irs-grid-pol {display: none;}刪除滴答。
• 白色和內部的.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} .irs-grid-text {color: white; bottom: 17px; z-index: 1}其中z-index使數字在條形本身上方一層。
• 我還添加了.irs-slider {width: 30px; height: 30px; top: 22px;} .irs-slider {width: 30px; height: 30px; top: 22px;} .irs-slider {width: 30px; height: 30px; top: 22px;}調整滑塊旋鈕。