Question

我需要一个垂直滑块输入。由于内置的sliderInput函数无法实现这一点，因此我选择自行实现。根据{{3}}，可以（I）使用CSS旋转sliderInput小部件，或者（II）使用公共滑块并实现与Shiny交互的功能。我决定选择（II），因为（I）没有按照我想要的方式工作。

我关注this thread以实现自定义verticalSlider函数

verticalSlider <- function(inputId, min, max, value) {
  tagList(
    singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css"))),
    singleton(tags$head(tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"))),

    singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "css/verticalSlider.css"))),
    singleton(tags$head(tags$script(src = "js/verticalSlider.js"))),

    tags$input(id = inputId,
               class = "verticalSlider",
               type = "text",
               value = "",
               `data-slider-min` = as.character(min),
               `data-slider-max` = as.character(max),
               `data-slider-step` = as.character(1),
               `data-slider-value` = as.character(min),
               `data-slider-orientation` = "vertical"
    )
  )
}

我实现了输入绑定并初始化了“js / verticalSlider.js”中的滑块。

$(function() {
  $('.verticalSlider').each(function() {
      $(this).slider({
        reversed : true,
        handle : 'square',
        change: function(event, ui){}
     });
    });
});

var verticalSliderBinding = new Shiny.InputBinding();
  $.extend(verticalSliderBinding, {
    find: function(scope) {
      return $(scope).find(".verticalSlider");
  },
  getValue: function(el) {
    return $(el).value;
  },
  setValue: function(el, val) {
    $(el).value = val;
  },
  subscribe: function(el, callback) {
    $(el).on("change.verticalSliderBinding", function(e) {
      callback();
    });
  },
  unsubscribe: function(el) {
    $(el).off(".verticalSliderBinding");
  },
  getRatePolicy: function() {
            return {
            policy: 'debounce',
            delay: 150
            };
  }
});

Shiny.inputBindings.register(verticalSliderBinding, "shiny.verticalSlider");

到目前为止一切顺利。每次移动滑块的旋钮时都会调用subscribe函数。

当滑块的值绑定到textOutput时，移动手柄无效。 Shiny的“反应性”似乎不适用于我的自定义组件。有人能指出我正确的方向吗？

Answer 1

您好根据bootstrap-slider readme，您应该在绑定中重写getValue和setValue方法：

getValue: function(el) {
  return $(el).slider('getValue');
},
setValue: function(el, val) {
  $(el).slider('setValue', val);
}

我认为只有在定义更新方法时才会使用setValue。

自定义小部件中的反应性

1 个答案: