Input LimitSlider的自定义输入绑定

我正在尝试为Shiny编写一个自定义输入小部件（如下所示：），包装jQueryUILimitSlider（）——基本上，我想要一个具有3个节点的滑块来参数化三角形分布。我正努力让自己“看到”变化事件

这是我的app.R脚本：

library(shiny)

limitSlider <- function(id, label, a, b, c, min = a, max = b) {
   div(class = 'form-group shiny-input-container',
       tags$label(label),
         div(class = "ui-limitslider", 
             id = id,
             `data-a` = a,
             `data-b` = b,
             `data-c` = c,
             `data-min` = min,
             `data-max` = max)
   )
}

ui <- shinyUI(fluidPage(

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css",
              href = "jquery-ui.css")
  ),

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css",
              href = "limitslider.css")
  ),

  tags$head(
    tags$script(src = "jquery-ui.js")
  ),

  tags$head(
    tags$script(src = "limitslider.js")
  ),

  tags$head(
    tags$script(src = "limitslidershiny.js")
  ),

  tags$head(
    tags$script(src = "limitsliderinputbinding.js")
  ),

  titlePanel("Test Limit Slider"),

  sidebarLayout(
    sidebarPanel(
      limitSlider("test1", "Test 1:", a = 25, b = 110, c = 80,
                   min = 0, max = 200),
    ),
    mainPanel(
      tableOutput("values")
    )
  )
))


server <- shinyServer(function(input, output) {

  sliderValues <- reactive({

    data.frame(
      Name  = c("test1"),
      Value = c(as.character(c(paste(input$test1, collapse = ' '))))
    )

  })

  output$values <- renderTable({
    sliderValues()
  })

})

# Run the application 
shinyApp(ui = ui, server = server)

var limitSliderInputBinding = new Shiny.InputBinding();

$.extend(limitSliderInputBinding, {

  find: function(scope) {
    return $(scope).find(".ui-limitslider");
  },

  getValue: function(el) {
    return $(el).limitslider("values");  
  },

  setValue: function(el, values) {
    $(el).limitslider("values", values);
  },

  subscribe: function(el, callback) {
    $(el).on("slidechange.limitSliderInputBinding", function(e) {
      callback();
    });
  },

  unsubscribe: function(el) {
    $(el).off(".limitSliderInputBinding");
  }

});

Shiny.inputBindings.register(limitSliderInputBinding);

下面是我的limitsliderinputbinding.js脚本：

library(shiny)

limitSlider <- function(id, label, a, b, c, min = a, max = b) {
   div(class = 'form-group shiny-input-container',
       tags$label(label),
         div(class = "ui-limitslider", 
             id = id,
             `data-a` = a,
             `data-b` = b,
             `data-c` = c,
             `data-min` = min,
             `data-max` = max)
   )
}

ui <- shinyUI(fluidPage(

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css",
              href = "jquery-ui.css")
  ),

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css",
              href = "limitslider.css")
  ),

  tags$head(
    tags$script(src = "jquery-ui.js")
  ),

  tags$head(
    tags$script(src = "limitslider.js")
  ),

  tags$head(
    tags$script(src = "limitslidershiny.js")
  ),

  tags$head(
    tags$script(src = "limitsliderinputbinding.js")
  ),

  titlePanel("Test Limit Slider"),

  sidebarLayout(
    sidebarPanel(
      limitSlider("test1", "Test 1:", a = 25, b = 110, c = 80,
                   min = 0, max = 200),
    ),
    mainPanel(
      tableOutput("values")
    )
  )
))


server <- shinyServer(function(input, output) {

  sliderValues <- reactive({

    data.frame(
      Name  = c("test1"),
      Value = c(as.character(c(paste(input$test1, collapse = ' '))))
    )

  })

  output$values <- renderTable({
    sliderValues()
  })

})

# Run the application 
shinyApp(ui = ui, server = server)

var limitSliderInputBinding = new Shiny.InputBinding();

$.extend(limitSliderInputBinding, {

  find: function(scope) {
    return $(scope).find(".ui-limitslider");
  },

  getValue: function(el) {
    return $(el).limitslider("values");  
  },

  setValue: function(el, values) {
    $(el).limitslider("values", values);
  },

  subscribe: function(el, callback) {
    $(el).on("slidechange.limitSliderInputBinding", function(e) {
      callback();
    });
  },

  unsubscribe: function(el) {
    $(el).off(".limitSliderInputBinding");
  }

});

Shiny.inputBindings.register(limitSliderInputBinding);

我认为，但不确定问题是否存在于订阅属性中

我正在使用jQueryUIV1.11.4。如果有人有任何建议或尝试的东西，我欢迎帮助

---

非常感谢

好的，一些同事帮我解决了这个问题。事实证明，构建在jQueryUI上的limitslider并没有初始化“change”函数。因此，这些修复方法是有效的：

$(this).limitslider({
   values: [a, c, b],
   gap: 0,
   label: true,
   min: min,
   max: max,
   change: function(event, ui){}
})

我对我的limitslidershiny.js文件进行了修改

另外，抛出的事件类型被称为“limitsliderchange”（通过执行console.log（event）可以看到这一点）

因此，基于此，我对limitsliderinputbinding.js文件进行了以下更改：

subscribe: function(el, callback) {
  $(el).on("limitsliderchange.limitSliderInputBinding", function(e) {
    callback();
  });
}

…类似于取消订阅