锁定自定义闪亮滑块

问题描述

我有一个自定义的闪亮输入,它是一组balanceSliders。我试图让用户将这些滑块之一“锁定”在适当的位置,以便您可以更好地设置其他两个滑块。我比R更熟悉R。因此,我不确定要执行什么逻辑才能使其中一个保持移动,同时仍然允许其他两个在两者之间自由移动,那么我不确定。我尝试使用Shinyjs软件包shinyjs::disable("test1",但这没用,也不确定在我的watchEvent中放入什么。即使确实禁用了滑块,我也不确定js文件在运行时是否会更新该数量。这是我的问题的一个完整的例子。很高兴回答任何问题。

发光的应用

### Shiny Inputs
library(shiny)

balancedSliderInput <- function(inputId,value = 0,label = "",group = "",width = "100%") {
  
  if (label != "")
    label <- paste0('<label class="control-label" for="',inputId,'">',label,'</label>')
  
  balanced_slider_tag <- tagList(
    div(style = paste("width: ",width),class = "all-balanced-slider",HTML(label),div(id = inputId,class = paste("balanced-slider",group),as.character(value)),span(class = "value","0"),HTML("%")
    )
  )
  
  dep <- list(
    htmltools::htmlDependency("balanced_slider","0.0.2",c(file = "www"),script = c("js/jquery-ui.min.js","js/balancedSlider.js"),stylesheet = c("css/jquery-ui.min.css")
    )
  )
  
  htmltools::attachDependencies(balanced_slider_tag,dep)
}

updateBalancedSliderInput <- function(session,value = 0) {
  message <- list(value = value)
  session$sendinputMessage(inputId,message)
}

registerInputHandler("balancedSlider",function(data,...) {
  if (is.null(data))
    NULL
  else
    data
  
},force = TRUE)


########## App ------ 
ui <- fixedPage(
  
  #actionButton("reset","Reset",icon = icon("undo-alt")),actionButton("lock1","Lock Test1"),actionButton("lock2","Lock Test2"),balancedSliderInput("test1",label = "Test1",value = 33),balancedSliderInput("test2",label = "Test2",balancedSliderInput("test3",textoutput("test")
  
)

server <- function(session,input,output) {
  
  test_reactive <- reactive({
    return(input$test1)
  })
  
  output$test <- renderText({
    test <- paste("Sluder 1 is at",test_reactive()[[1]])
    return(test)
  })
  
  observeEvent(input$lock1,{ 
    #### WHAT SHOULD GO HERE?? The below doesn't work. 
    shinyjs::disable("test1")
  })
  
}

shinyApp(ui,server)

JAVASCRIPT

$(function() {

    $('.balanced-slider').each(function() {
        console.log("Running Log 1")
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,min: 0,max: 100,range: "max",step: 0.5,animate: 0,slide: function(event,ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);

                // Get current total
                var total = ui.value;
                var sibling_count = 0;

                var classes = $(this).attr("class").split(/\s+/);
                var selector = ' .' + classes.join('.');
                //console.log(selector);

                var others = $(selector).not(this);
                others.each(function() {
                    total += $(this).slider("option","value");
                    sibling_count += 1;
                });

                //console.log(total);

                var delta = total - 100;
                var remainder = 0;
                
                // Update each slider
                others.each(function() {
                    console.log("Running Log 2")
                    var t = $(this);
                    var current_value = t.slider("option","value");

                    var new_value = current_value - delta / sibling_count;
                    
                    if (new_value < 0) {
                        remainder += new_value;
                        new_value = 0;
                    }

                    t.siblings('.value').text(new_value.toFixed(1));
                    t.slider('value',new_value);

                });


                if(remainder) {
                    var pos_val_count = 0;
                    others.each(function() {
                        if($(this).slider("option","value") > 0)
                            pos_val_count += 1;
                    });

                    others.each(function() {
                        if($(this).slider("option","value") > 0) {
                            var t = $(this);
                            var current_value = t.slider("option","value");

                            var new_value = current_value + remainder / pos_val_count;

                            t.siblings('.value').text(new_value.toFixed(1));
                            t.slider('value',new_value);
                        }
                    });

                }

                
            },// fire the callback event for the other sliders
            stop: function(event,ui) {
                var classes = $(this).attr("class").split(/\s+/);
                var selector = '.' + classes.join('.');

                $(selector).not(this).each(function() {
                   $(this).trigger("slidestop");
                });
            }
        });
    });
});

var balancedSliderBinding = new Shiny.InputBinding();

$.extend(balancedSliderBinding,{
  find: function(scope) {
    return $(scope).find(".balanced-slider");
  },// The input rate limiting policy
  getRatePolicy: function() {
    console.log("Log 8")
    return {
      // Can be 'debounce' or 'throttle'
      policy: 'debounce',delay: 500
    };
  },getType: function() {
    return "balancedSlider";
  },getValue: function(el) {
    console.log("Running Log 3")
    var obj = {};
    obj[$(el).attr("id")] = $(el).slider("option","value");
    return obj;
  },setValue: function(el,new_value) {
    console.log("Running Log 4")
    $(el).slider('value',new_value);
    $(el).siblings('.value').text(new_value);

  },subscribe: function(el,callback) {
    console.log("Log 6")
    $(el).on("slidestop.balancedSliderBinding",function(e) {
      callback(); // add true parameter to enable rate policy
    });
  },unsubscribe: function(el) {
    console.log("Log 7")
    $(el).off(".balancedSliderBinding");
  },// Receive messages from the server.
  // Messages sent by updateUrlinput() are received by this function.
  receiveMessage: function(el,data) {
        console.log("Running Log 5")
    if (data.hasOwnProperty('value'))
      this.setValue(el,data.value);

    $(el).trigger('change');
  },});

Shiny.inputBindings.register(balancedSliderBinding,"balancedSliderBinding");

// Testing
$(document).ready(function() {
  $(`#reset_drive`).on(`click`,function() { 
    //$(`#bike_share`).getValue()
    //$(`#car_share`).getValue()
    //$(`#carpool_share`).getValue()
  });
})

我也尝试过实现以下内容,但不确定如何选择“锁定”内容

可能的JavaScript更改

            slide: function(event,ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);

                // Get current total
                var total = ui.value;
                var sibling_count = 0;
                var locked_count = 0; 

                var classes = $(this).attr("class").split(/\s+/);
                var selector = ' .' + classes.join('.');
                //console.log(selector);

                var others = $(selector).not(this);
                others.each(function() {
                    total += $(this).slider("option","value");
                    sibling_count += 1;
                    // How can I select a "Locked Slider?"
                    if ($(this)) {
                      locked_count += 1
                    }
                });

                //console.log(total);

                var delta = total - 100;
                var remainder = 0;
                
                // Update each slider
                others.each(function() {
                  
                  // If this is not locked... 
                  if ($(this)) {
                    var t = $(this);
                    var current_value = t.slider("option","value");
                    var unlocked_siblings = sibling_count - locked_count
                    var new_value = current_value - delta / unlocked_siblings;
                    
                    if (new_value < 0) {
                        remainder += new_value;
                        new_value = 0;
                    }

                    t.siblings('.value').text(new_value.toFixed(1));
                    t.slider('value',new_value);
                  }


                });


                if (remainder) {
                    var pos_val_count = 0;
                    others.each(function() {
                        if($(this).slider("option",List item

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)