R shiny - 将滑块与文本输入相结合,使滑块更加用户友好

时间:2017-10-16 18:09:13

标签: html css r shiny

当我尝试选择具有极大差距的范围(例如2000)时,使用内置的sliderInput(例如向内部添加10)向前迈出一小步将会有点困难。输入)。我正在尝试实现两个textInputs来与sliderBar交互,以控制min和max值在同一时间更准确。有没有可能的方法呢?

1 个答案:

答案 0 :(得分:3)

我建议您使用updateSliderInputupdateTextInput函数。这些函数允许您像这样更新给定的Value元素

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

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

下面的工作解决方案创建了名为controledSlider的闪亮模块。此模块将minmaxvalue作为参数,并显示滑块,两个文本框和一个操作按钮。

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)
    })
  }
)

enter image description here