html - Rshiny - 将 slider 与文本输入相结合，使 slider 更加人性化

Question

当我尝试选择差距极大的范围(例如 2000)时，使用内置的 sliderInput 向前迈出一小步(例如将 10 添加到输入)。我正在尝试实现两个 textInputs 与 sliderBar 交互，以同时控制最小值和最大值更加准确。有没有一些可能的方法可以做到这一点？

Answer 1

我建议使用函数 updateSliderInput 和 updateTextInput 来实现此目的。这些函数可让您像这样更新给定的 Values 元素

updateSliderInput(session, "slider_id", value = c(0,1))
updateTextInput(session, "text_id", placeholder = "placeholder")

或者，您也可以使用 renderUI，但在大多数用例中，出于性能原因，应首选更新函数。

下面的工作解决方案创建了名为 controledSlider 的 Shiny 模块。该模块将 min、max 和 value 作为参数，并显示一个 slider 、两个文本框和一个操作按钮。

library(shiny)

controlledSliderUI <- function(id){
  ns = NS(id)
  wellPanel(
    sliderInput(ns("slider"), NULL, 0, 1, c(0, 1)),
    textInput(ns("min"), "min", 0, "50%"),
    textInput(ns("max"), "max", 100, "50%"),
    actionButton(ns("update"), "update slider")
  )
}

controlledSlider <- function(input, output, session, min, max, value){
  reactiveRange <- reactiveValues(min = value[1], max = value[2])
  updateSliderInput(session, "slider", min = min, max = max)

  ## observe slider
  observeEvent(input$slider,{
    reactiveRange$min <- input$slider[1]
    reactiveRange$max <- input$slider[2]
  }, ignoreInit = TRUE)

  ## observe button
  observeEvent(input$update,{reactiveRange$min <- as.numeric(input$min)})
  observeEvent(input$update,{reactiveRange$max <- as.numeric(input$max)})

  ## observe reactive
  observeEvent({reactiveRange$min; reactiveRange$max},{
    updateSliderInput(
      session, "slider", value = c(reactiveRange$min, reactiveRange$max))
    updateTextInput(session, "min", value = reactiveRange$min)
    updateTextInput(session, "max", value = reactiveRange$max)
  })

  return(reactiveRange)
}

该模块返回一个 reactiveValue 对象，可以从主服务器功能读取和更新该对象。

shinyApp(
  fluidPage(
    controlledSliderUI("mySlider"),
    verbatimTextOutput("text")
  ),
  function(input, output, session){
    range <- callModule(controlledSlider, "mySlider", 0, 1200, c(100,1000))
    range$max <- 1001  ## update max
    output$text <- renderPrint({
      print(range$min)
      print(range$max)
    })
  }
)