Search code examples
javascripthtmlcssajaxround-slider

How to add a enable/disable button to the roundSlider widget?

In the below snippet code I have a three roundSlider widgets, and I am trying to add a enable/disable button under each slider.

Please, I would highly appreciate your help to show/guide me how to add a these enable/disable button to whether aside of the widgets or preferably a button under each slider.

code:

<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>

Solution

  • The roundSlider having the enable and disable methods, so you can maintain any state and based on the state you can toggle the state of the slider.

    In the below demo I have achieved that functionality and based on your application scenario you can reuse this:

    DEMO