自定义与shinyWidgets功能一致的numericRangeInput并实现单inputId调用

核心逻辑说明 #

要实现单个inputId绑定两个数值的效果，不需要给两个输入框设置独立的Shiny可识别id，通过自定义Shiny输入绑定即可将两个输入框的值合并为长度为2的向量，绑定到同一个输入ID上。

优化后完整实现代码 #

1. UI函数代码 #

library(tidyverse)
library(shiny)

customNumericRangeInput <- function(inputId, title = "title", text = "to", placeholder = c(0,0), value = c(0,0), min = NULL, max = NULL, step = NULL){
  # 生成两个输入框的私有标识，不暴露给Shiny输入体系
  min_id <- paste0(inputId, "_min_private")
  max_id <- paste0(inputId, "_max_private")
  
  # 拼接可选参数
  min_attr <- if(!is.null(min)) paste0('min="', min, '"') else ""
  max_attr <- if(!is.null(max)) paste0('max="', max, '"') else ""
  step_attr <- if(!is.null(step)) paste0('step="', step, '"') else ""
  
  tagList(
    tags$label(title),
    div(
      class = "input-group input-group-sm m-4 custom-numeric-range",
      `data-input-id` = inputId,
      style = "margin:0!important;margin-top:5px!important;margin-bottom:10px!important;",
      tags$input(
        class = "form-control custom-range-min",
        type = "number",
        id = min_id,
        placeholder = placeholder[1],
        value = value[1],
        HTML(min_attr), HTML(max_attr), HTML(step_attr)
      ),
      div(
        class = "input-group-prepend input-group-append",
        div(class = "input-group-text", text)
      ),
      tags$input(
        class = "form-control custom-range-max",
        type = "number",
        id = max_id,
        placeholder = placeholder[2],
        value = value[2],
        HTML(min_attr), HTML(max_attr), HTML(step_attr)
      )
    ),
    # 自定义输入绑定的JS代码
    tags$script(HTML(
      "
      Shiny.addCustomMessageHandler('customNumericRangeBinding', function() {
        var customRangeBinding = new Shiny.InputBinding();
        $.extend(customRangeBinding, {
          find: function(scope) {
            return $(scope).find('.custom-numeric-range');
          },
          getValue: function(el) {
            var minVal = $(el).find('.custom-range-min').val();
            var maxVal = $(el).find('.custom-range-max').val();
            // 转换为数值类型返回
            return [parseFloat(minVal), parseFloat(maxVal)];
          },
          setValue: function(el, value) {
            $(el).find('.custom-range-min').val(value[0]);
            $(el).find('.custom-range-max').val(value[1]);
          },
          subscribe: function(el, callback) {
            $(el).on('input.customRangeBinding', 'input', function(e) {
              callback();
            });
          },
          unsubscribe: function(el) {
            $(el).off('.customRangeBinding');
          }
        });
        Shiny.inputBindings.register(customRangeBinding);
      });
      "
    )),
    # 初始化触发绑定注册
    tags$script(HTML("$(function() { Shiny.onInputChange('customNumericRangeBinding', 'init'); });"))
  )
}

2. 调用示例 #

# 示例Shiny应用
ui <- fluidPage(
  customNumericRangeInput(inputId = "my_range", title = "选择数值区间", value = c(10, 50), min = 0, max = 100, step = 1),
  verbatimTextOutput("range_val")
)

server <- function(input, output) {
  output$range_val <- renderPrint({
    # 直接通过单个inputId获取长度为2的区间向量
    input$my_range
  })
}

shinyApp(ui, server)

其他优化建议 #

• 新增了min、max、step原生数值输入框常用参数，和Shiny官方参数保持一致，降低使用学习成本
• 废弃了手动传入id向量的逻辑，避免外部传入重复id的问题
• 改用Shiny原生tagList构建HTML元素，代替手动拼接字符串，避免转义错误
• 加入了setValue方法，支持服务端通过标准逻辑动态更新组件值

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