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) 

スライダーquareの
• 端部irs.bar, .irs-bar-edge {border-radius: 0px}です。
• .irs-grid-pol {display: none;}を設定してダニを削除します。
• ティックナンバーは白で、内側は.irs-grid-text {color: white; bottom: 17px; z-index: 1}です。ここで、z-indexは、バー自体の上の1つのレイヤーになります。
• また、.irs-slider {width: 30px; height: 30px; top: 22px;}を追加して、スライダーのつまみを調整しました。