闪亮的滑块限制了释放鼠标左键的反应 [英] Shiny slider restrict reaction to releasing left mouse button

问题描述

我正在使用 Shiny 应用程序，其中将滑块设置为正确的值可能需要一些时间.

I am using a Shiny application in which it may take some time to set a slider to the right value.

因此，在尝试将滑块设置为正确的值(而不是释放我的鼠标左键！)时，(即我的本地)服务器观察到几个新值并做出相应的反应.

So while trying to set the slider to the right value (and not releasing my left mouse button!) the (i.e. my local) server observed several new values and reacts accordingly.

因为我的服务器对任何新值的响应可能需要几秒钟，如果我可以的话我会很高兴:

As the response of my server on any new value may take a few seconds I would be pleased if I could either:

• 推迟向服务器发送信号直到释放鼠标左键，或
• 在服务器端，如果收到新值，则中止任何先前的响应

推荐答案

Shiny 的 sliderInput 使用 Ion.RangeSlider，当用户释放鼠标时，它有一个 onFinish 回调.这听起来正是我们所需要的.

Shiny's sliderInput uses Ion.RangeSlider, which has an onFinish callback for when a user releases their mouse. That sounds like just what we need.

这是一个惰性"滑块输入的自定义输入绑定，它仅在用户释放鼠标 (onFinish) 或滑块被强制更新时 (onUpdate).

Here's a custom input binding for a "lazy" slider input that only signals a value change when a user releases their mouse (onFinish) or when the slider is forcibly updated (onUpdate).

例如，我只是内联了更改所有滑块输入行为的代码.您需要将其移至外部脚本并进一步自定义.此外， onUpdate 在滑块初始化时被调用，但在 Shiny 初始化输入值之前.您必须等到 Shiny 执行此操作才能调用 onUpdate 中的值更改回调.我使用的解决方案并不出色，但我懒得找到更简洁的方法.

For the example, I just inlined code that changes the behavior of ALL sliderInputs. You'll want to move this to an external script and customize further. Also, onUpdate gets called when the slider is initialized, but before Shiny initializes input values. You have to wait until Shiny does this to call the value change callback in onUpdate. The solution I worked in isn't fantastic, but I was too lazy to find a cleaner way.

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script(HTML("
      (function() {
        var sliderInputBinding = Shiny.inputBindings.bindingNames['shiny.sliderInput'].binding;

        var lazySliderInputBinding = $.extend({}, sliderInputBinding, {
          subscribe: function(el, callback) {
            var $el = $(el);
            var slider = $el.data('ionRangeSlider');

            var handleChange = function() {
              if (!inputsInitialized) return;
              callback(!$el.data('immediate') && !$el.data('animating'));
            };

            slider.update({
              onUpdate: handleChange,
              onFinish: handleChange
            });
          },

          unsubscribe: function(el, callback) {
            var slider = $(el).data('ionRangeSlider');
            slider.update({
              onUpdate: null,
              onFinish: null
            });
          }
        });

        Shiny.inputBindings.register(lazySliderInputBinding, 'shiny.lazySliderInput');

        var inputsInitialized = false;
        $(document).one('shiny:connected', function() {
          inputsInitialized = true;
        });
      })();
    "))
  ),
  sliderInput("sliderA", "A", 0, 10, 5),
  uiOutput("sliderB"),
  verbatimTextOutput("sliderValues"),
  actionButton("resetSliders", "Reset Sliders")
)

server <- function(input, output, session) {
  observeEvent(input$resetSliders, {
    updateSliderInput(session, "sliderA", value = 5)
    updateSliderInput(session, "sliderB", value = c(4, 6))
  })

  output$sliderB <- renderUI({
    sliderInput("sliderB", "B", 0, 10, c(4, 6))
  })

  output$sliderValues <- renderPrint({
    cat(paste("Slider A =", input$sliderA), "\n")
    cat(paste("Slider B =", paste(input$sliderB, collapse = " ")))
  })
}

shinyApp(ui, server)

这篇关于闪亮的滑块限制了释放鼠标左键的反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！