R Shiny中如何实现类似dateRangeInput的数值范围选择UI组件

解决方案 #

方案1：使用shinyWidgets包内置组件 #

shinyWidgets包已经原生提供了完全符合需求的numericRangeInput组件，参数定义和你给出的调用示例完全一致，直接安装后即可调用：

# 先安装扩展包
install.packages("shinyWidgets")

调用示例完全匹配你给出的写法：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  numericRangeInput(
    inputId = "age", 
    label = "Age range:",
    start  = 10,
    end    = 30,
    min    = 0,
    max    = 150,
    separator = "to"
  ),
  verbatimTextOutput("res")
)

server <- function(input, output) {
  output$res <- renderPrint({
    input$age
  })
}

shinyApp(ui, server)

组件返回值是长度为2的数值向量，第一位为起始值，第二位为结束值。

方案2：自定义实现（无需额外依赖） #

如果你不想引入第三方扩展包，也可以自定义封装同名函数，代码如下：

numericRangeInput <- function(inputId, label, start, end, min = NA, max = NA, step = NA, separator = "to") {
  tagList(
    tags$label(label, `for` = inputId, class = "control-label"),
    div(
      id = inputId,
      class = "numeric-range-input input-group",
      style = "display: flex; gap: 8px; align-items: center; margin-top: 5px;",
      numericInput(
        inputId = paste0(inputId, "_start"),
        label = NULL,
        value = start,
        min = min,
        max = max,
        step = step,
        width = "45%"
      ),
      span(separator, style = "padding: 0 5px;"),
      numericInput(
        inputId = paste0(inputId, "_end"),
        label = NULL,
        value = end,
        min = min,
        max = max,
        step = step,
        width = "45%"
      )
    ),
    # 绑定自定义输入逻辑，合并两个输入值返回
    tags$script(HTML(sprintf("
      $(function() {
        var start = $('#%s_start');
        var end = $('#%s_end');
        var update = function() {
          Shiny.setInputValue('%s', [Number(start.val()), Number(end.val())]);
        };
        start.on('change', update);
        end.on('change', update);
        update();
      });
    ", inputId, inputId, inputId)))
  )
}

自定义组件的调用方式、返回值和官方组件完全一致，不需要修改你给出的调用示例代码。

内容的提问来源于stack exchange，提问作者Andrii