roundSlider - v1.3.3 - Base Fiddle

roundSlider - v1.3.3 - Base Fiddle

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js"></script>
<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.3.3</a></h2>


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

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

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

    <center>
      <p>slider3</p>
      <button class="sliderStateChange">Disable</button>
    </center>
  </div>
</div>

CSS

.container {
  display: flex;
}
.child {
  margin-left: 30px;
}

JavaScript

$("#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,

  });
});

$(".sliderStateChange").click(function(e) {
	var btnEle = $(e.target);
  var container = btnEle.parents('.child');
  var sliderEle = container.children('.rs-control');
  
  if (sliderEle.length > 0) {
  	var state = btnEle.text();
    var sliderObj = sliderEle.data("roundSlider");
    if (state == "Disable") {
    	sliderObj.disable();
      btnEle.html("Enable");
    }
    else {
    	sliderObj.enable();
      btnEle.html("Disable");
    }
  }
});