如何为ShinyWidgets的autonumericInput显示步进箭头？

核心原因 #

autonumericInput基于AutoNumeric库构建，默认样式未启用步进箭头；而标准numericInput依赖浏览器原生输入控件样式，自带箭头。wheelSteps参数仅控制滚轮滚动时的步长，不负责显示箭头UI。

解决方案：自定义CSS+JS #

要让autonumericInput显示并可点击步进箭头，需要通过自定义CSS模拟箭头样式，再结合JavaScript实现点击步进逻辑，以下是具体实现：

1. 完整Shiny应用示例 #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    # 自定义箭头样式的CSS
    tags$style(HTML("
      /* 为输入框容器留出箭头空间 */
      .shiny-input-container:not(.shiny-input-container-inline) .autonumeric-input {
        position: relative;
        padding-right: 2.5em;
      }
      /* 添加上箭头 */
      .autonumeric-input::after {
        content: '';
        position: absolute;
        right: 0.5em;
        top: 20%;
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #666;
        cursor: pointer;
      }
      /* 添加下箭头 */
      .autonumeric-input::before {
        content: '';
        position: absolute;
        right: 0.5em;
        bottom: 20%;
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #666;
        cursor: pointer;
      }
      /* 箭头hover效果 */
      .autonumeric-input:hover::after,
      .autonumeric-input:hover::before {
        border-color: #333;
      }
    ")),
    # 绑定箭头点击事件的JS
    tags$script(HTML("
      $(document).on('click', '.autonumeric-input', function(e) {
        const input = $(this);
        const autoNumeric = input.data('AutoNumeric');
        if (!autoNumeric) return;
        
        const step = autoNumeric.get('step');
        // 判断点击位置是上箭头还是下箭头
        const rect = input[0].getBoundingClientRect();
        const clickY = e.clientY - rect.top;
        if (clickY < rect.height / 2) {
          // 上箭头：增加步长
          autoNumeric.update(autoNumeric.getNumber() + step);
        } else {
          // 下箭头：减少步长
          autoNumeric.update(autoNumeric.getNumber() - step);
        }
      });
    "))
  ),
  fluidRow(
    column(6,
           h4("autonumericInput（带自定义箭头）"),
           autonumericInput("auto_num", "数值输入:", value = 0, step = 1)
    ),
    column(6,
           h4("标准numericInput"),
           numericInput("std_num", "数值输入:", value = 0, step = 1)
    )
  )
)

server <- function(input, output, session) {
  # 可在此监听输入值变化
}

shinyApp(ui, server)

关键说明 #

• CSS部分通过伪元素::before和::after模拟步进箭头，调整位置和样式匹配原生控件视觉效果。
• JavaScript部分借助AutoNumeric实例的API，判断点击位置实现数值的增减，确保步长与autonumericInput设置的step参数一致。
• 如果需要按住箭头连续增减的交互，可以扩展JS逻辑，添加定时器实现连续触发效果。

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