Javascript 自定义小部件中的反应性

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

为了实现自定义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"
    )
  )
}

到目前为止还不错。每次我移动滑块的旋钮时，都会调用subscribe函数

但是，当滑块的值绑定到文本输出时，移动控制柄无效。

---

Shinny的“反应性”似乎不适用于我的自定义组件。有人能给我指出正确的方向吗？

您好，根据引导滑块，您应该在绑定中重写

getValue

和

setValue

方法：

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

---

我认为

setValue

仅在定义更新方法时使用。

哇，谢谢！我当然没想到会有这样的错误。现在一切正常！

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