Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="roundSlider - v1.5.1 - Base jsBin">
  <meta charset="utf-8">
  <title>roundSlider v1.5.1 - JS Bin</title>
  <script src="//code.jquery.com/jquery-3.2.1.js"></script>
  <link href="//cdn.jsdelivr.net/npm/round-slider@1.5.1/dist/roundslider.min.css" rel="stylesheet"/>
  <script src="https://cdn.jsdelivr.net/npm/round-slider@1.5.1/dist/roundslider.min.js"></script>
</head>
  
<body style="padding-left: 15px;">
  <h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.5.1</a></h2>
​
  <div class="row">
    <div class="col">
      <h3>Default slider</h3>
      <div id="slider1"></div>
    </div>
  
    <div class="col">
      <h3>Slider with startValue</h3>
      <div id="slider2"></div>
    </div>
  </div>
  
</body>
</html>
 
$(function(){
      
  
  $("#slider1").roundSlider({
    sliderType: "min-range",
    value: 80,
      svgMode: true
  });
​
  $("#slider2").roundSlider({
    sliderType: "min-range",
    circleShape: "pie",
    startAngle: "315",
    lineCap: "round",
    radius: 130,
    width: 20,
​
    min: -50,
    max: 50,
    
    svgMode: true,
      pathColor: "#eee",
      borderWidth: 0,
    
      startValue: 0,
    
    valueChange: function (e) {
        var color = e.isInvertedRange ? "#FF5722" : "#8BC34A";
      
      $("#slider2").roundSlider({ "rangeColor": color, "tooltipColor": color });
    }
  });
​
  var sliderObj = $("#slider2").data("roundSlider");
  sliderObj.setValue(30);
      
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
soundar24pro
0viewers