时间戳

首页 > 解决方案 > 如何向 roundSlider 小部件添加启用/禁用按钮？

javascript - 如何向 roundSlider 小部件添加启用/禁用按钮？

问题描述

在下面的代码片段中，我有一个三个 roundSlider 小部件，我试图在每个滑块下添加一个启用/禁用按钮。

拜托，我非常感谢您帮助我展示/指导我如何将这些启用/禁用按钮添加到小部件旁边，或者最好是每个滑块下的按钮。

代码：

<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

<style>
  .container {
    display: flex;
  }
  .child
  {
  margin-left:100px;
  }
</style>

<body>
  <div class="container">
    <div class="child">
      <div id="slider1" class='slider row1 col1'></div>

      <center>
        <p>slider1</p>
      </center>
    </div>
    <div class="child">
      <div id="slider2" class='slider row1 col2'></div>
      <center>
        <p>slider2</p>
      </center>
    </div>

    <div class="child">
      <div id="slider3" class='slider row1 col3'></div>

      <center>
        <p>slider3</p>
      </center>
    </div>
  </div>
  <script>
    // create sliders

    $("#slider1").roundSlider({
      sliderType: "min-range",
      radius: 150,
      min: 0,

      max: 100,
      value: 0, // default value at start
      //change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
      change: function(event) {
        $.getJSON('/set_my_number/' + event.value);
      }
    });


    $("#slider2").roundSlider({
      sliderType: "min-range",
      radius: 150,
      min: 0,
      max: 1000,
      value: 0, // default value at start

      //change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
      change: function(event) {
        $.getJSON('/set_abcd/' + event.value);
      }
    });

    $("#slider3").roundSlider({
      sliderType: "min-range",
      radius: 150,
      min: 0,
      max: 10000000000,
      value: 0, // default value at start
      //change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
      change: function(event) {
        $.getJSON('/set_fghkva/' + event.value);
      }
    });

    $("#turn_off_button").click(function() {
      // set sliders
      $("#slider1").data("roundSlider").setValue(0);


      // send to server
      $.getJSON('/valueofslider', {
        slide1_val: 0,

      });
    });
  </script>

</body>

</html>

标签： javascripthtmlcssajaxround-slider

解决方案

roundSlider具有启用和禁用方法，因此您可以保持任何状态并根据状态切换滑块的状态。

在下面的演示中，我已经实现了该功能，并且根据您的应用场景，您可以重用它：

DEMO

推荐阅读