Question

我想要一个用于快速，可视输入的滑块，还需要一个相应的数字输入来进行精确计算。我设法将滑块value绑定到input$，因此它们将遵循数字输入中写入的内容。但是，我似乎无法让它以相反的方式发挥作用。

UI

    numericInput("num_l",
                 label = "Beam length in m.",
                 value = 10),

    numericInput("num_a",
                 label = "Choose position, where to apply force, starting from left, in m.",
                 value = input$slider_a), # THIS DOESN'T WORK

    numericInput("num_x",
                 label = "Calculate the deflection, at position starting from left, in m.",
                 value = input$slider_x), # NEITHER DOES THIS

服务器

output$slider <- renderUI({
    tagList( # Need this for multiple reactive sliders
        sliderInput("slider_a",
                    label = "Load force position:",
                    min = 0,
                    max = input$num_l,
                    value = input$num_a, # THIS WORKS
                    step = 0.1),

        sliderInput("slider_x",
                    label = "Deflection calculation position:",
                    min = 0,
                    max = input$num_l,
                    value = input$num_x, # THIS ALSO WORKS
                    step = 0.1)
    )
})

Answer 1

使用更新功能：

ui <- fluidPage(

      numericInput("num_i",
                   label = "my input:",
                   value = 4,
                   min = 0,
                   max = 10),

      sliderInput("num_s",
                  label = "my slider:",
                  value = 4,
                  min = 0,
                  max = 10)
    )


server <- function(output, input, session){

      observe({

        updateSliderInput(
          session = session,
          inputId = "num_s",
          value = input$num_i
        )
      })


      observe({

        updateSliderInput(
          session = session,
          inputId = "num_i",
          value = input$num_s
        )
      })
    }


shinyApp(ui, server)

但是，它可能会导致一些问题，因为数字输入的更新会触发更新滑块，反之亦然。我注意到人们可能遇到无限循环。我不知道如何解决这个问题，所以我将等待更高级的闪亮开发人员的其他答案。

该问题的一个可能解决方案如下：使用jQuery函数更新输入控件。使用服务器端的标准观察器更新滑块。但是，使用jQuery更新控件并未反映在服务器上，更新仅在客户端（Web浏览器）中起作用。这似乎不是问题，因为您可以跟踪滑块并在应用程序的代码中使用其值。第二个控件仅用于显示目的。

所以，写一个像这样的jQuery函数：

$('document').ready(function(){
  $('#num_s').change(function(){
    var new_val = $(this).val();
    $('#num_i').val(new_val);
  });
});

将其保存在www文件夹中，然后使用includeScript（）将文件包含在应用程序中。

Shiny中的互连滑块和数字输入

1 个答案: