Question

我试图根据用户的号码输入渲染几个滑块。这非常好用，但是，我无法更改新渲染的滑块的颜色。

参见示例：

import javafx.collections.FXCollections;
import javafx.collections.MapChangeListener;
import javafx.collections.ObservableMap;

当我更改滑块的数量时，这将停止工作。我想这是因为渲染了新的滑块并且第一个滑块（最初渲染）不再可见。

此外，当在渲染这些滑块之前和之后存在一些其他滑块时，这将无法正常工作。

有没有办法如何使用自己的风格渲染滑块？

Answer 1

我终于找到了解决方案。希望这有助于其他人。

if (interactive()) {

  ui <- fluidPage(
    tags$style(tags$style(type = 'text/css', 
                          ".js-irs-blue .irs-single, .js-irs-blue .irs-bar-edge, .js-irs-blue .irs-bar {
                          background: blue;
                          border-top-color: blue;
                          border-bottom-color: blue;
                          border-left-color: blue;
                          border-right-color: blue}"),
               tags$style(type = 'text/css', 
                          ".js-irs-red .irs-single, .js-irs-red .irs-bar-edge, .js-irs-red .irs-bar {
                          background: red;
                          border-top-color: red;
                          border-bottom-color: red;
                          border-left-color: red;
                          border-right-color: red}"),
               tags$style(type = 'text/css', 
                          ".js-irs-green .irs-single, .js-irs-green .irs-bar-edge, .js-irs-green .irs-bar {
                          background: green;
                          border-top-color: green;
                          border-bottom-color: green;
                          border-left-color: green;
                          border-right-color: green}"),
               tags$style(type = 'text/css', 
                          ".js-irs-yellow .irs-single, .js-irs-yellow .irs-bar-edge, .js-irs-yellow .irs-bar {
                          background: yellow;
                          border-top-color: yellow;
                          border-bottom-color: yellow;
                          border-left-color: yellow;
                          border-right-color: yellow}"),
               tags$style(type = 'text/css', 
                          ".js-irs-purple .irs-single, .js-irs-purple .irs-bar-edge, .js-irs-purple .irs-bar {
                          background: purple;
                          border-top-color: purple;
                          border-bottom-color: purple;
                          border-left-color: purple;
                          border-right-color: purple}")),
    numericInput("num", "Number", value = 1, min = 1, max = 5),
    sliderInput("slider00", "No style slider",
                value = 1, min = 1, max = 5, step = 1),
    uiOutput("rendersliders"),
    sliderInput("slider000", "No style slider",
                value = 1, min = 1, max = 5, step = 1)
               )

  server <- function(input, output) {

    output$rendersliders <- renderUI({
      num <- input$num

      sliders <- tagList(
        tags$div(class = "js-irs-red", sliderInput("slider1", "Red slider",
                                                   value = 1, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-blue", sliderInput("slider2", "Blue slider",
                                                    value = 2, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-green", sliderInput("slider3", "Green slider",
                                                     value = 3, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-yellow", sliderInput("slider4", "Yellow slider",
                                                      value = 4, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-purple", sliderInput("slider5", "Purple slider",
                                                      value = 5, min = 1, max = 5, step = 1))
      )

      sliders <- sliders[1:num]
      sliders
    })
  }

  shinyApp(ui, server)
  }

使用样式渲染sliderInput

1 个答案: