0

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>
  • Look [here](https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button) to see how you disable / enable buttons via javascript – alea Sep 04 '19 at 16:59

1 Answers1

0

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

Soundar
  • 2,569
  • 1
  • 16
  • 24
  • OUTSTANDING! Thanks a LOT. –  Sep 04 '19 at 19:30
  • just out of curiosity, do you think I can set these sliders to disabled state by default once I run the program, then I can later enable whatever slider I need? I tried to add 'state: disabled,' to the sliders parameters but this line made sliders disappear! –  Sep 05 '19 at 13:07
  • I found it. It should be=> disabled: true instead of state: disabled –  Sep 05 '19 at 13:23
  • would you please take a look here https://stackoverflow.com/questions/57811127/how-to-enable-disable-a-function-in-python-flask –  Sep 05 '19 at 21:54
  • sorry, I am not aware of python. – Soundar Sep 06 '19 at 11:01