调整滑块标签位置 sliderInput R

问题描述 投票:0回答:1

我在闪亮的应用程序上有一个

sliderInput

如果它与另一个元素在同一行,则可拖动滑块上的标签将与这些元素重叠。如果滑块的宽度设置为 100%,标签将离开屏幕,如上图所示。

如何调整滑块的 js/css,使可拖动滑块的标签在最大位置时右对齐,在最小位置时左对齐,这样它就不会与任何其他元素重叠或者是被屏幕边缘切断?

以下可重现代码:


library(shiny)

dates <- seq(from = as.Date("2020-01-01"), to = as.Date("2020-12-31"),
           by = "day")



ui <- fluidPage(

    sliderInput(inputId = "sldr", label = "", 
                min = min(dates), max = max(dates), value = min(dates),
                width = "100%")
    
)


server <- function(input, output) {

   
}

shinyApp(ui = ui, server = server)
r shiny
1个回答
0
投票
library(shiny)

dates <- seq(from = as.Date("2020-01-01"), to = as.Date("2020-12-31"),
           by = "day")

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      #my-slider .js-irs-0 .irs-single {
        text-align: right;
      }

      #my-slider .js-irs-0 .irs-single:before {
        left: auto;
        right: 0;
      }

      #my-slider .js-irs-0 .irs-single:after {
        left: auto;
        right: 0;
      }
    "))
  ),
  sliderInput(inputId = "my-slider", label = "", 
              min = min(dates), max = max(dates), value = min(dates),
              width = "100%")
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)
© www.soinside.com 2019 - 2024. All rights reserved.