@maslick/radiaslider

=radiaSlider=

a simple pure JavaScript circular/linear knob-style slider

 * works on desktop, mobile and tablets
 * minified ~6 Kb
 * pure JavaScript (ECMAScript 5.1)
 * no dependencies

Demo

Circular / linear

Quickstart

• create a canvas and the value field

<canvas id="myCanvas" width="300" height="300"></canvas>
<span id="value1"></span>

Circular slider

• import js

<script src="slider-circular.min.js"></script>

• initialize a slider

<script>
  var slider = new Slider({canvasId: "myCanvas", continuousMode: true, x0: 150, y0: 150});
  slider.addSlider({
    id: 1,
    radius: 50,
    min: 0,
    max: 30,
    step: 5,
    color: "#104b63",
    changed: function (v) {
      document.getElementById('value1').innerHTML = "Angle: " + v.deg + " deg, value: " + v.value;
    }
  });
</script>

Linear slider

• import js

<script src="slider-linear.min.js"></script>

• initialize a slider

<script>
  var slider = new Slider({canvasId: "myCanvas",  continuousMode: true,  vertical: false});
  slider.addSlider({
    id: 1,
    width: 50,
    min: 0,
    max: 30,
    step: 5,
    color: "#104b63",
    changed: function (v) {
      document.getElementById('value1').innerHTML = "Width: " + v.width + " px, value: " + v.value;
    },
    x0: 30,
    y0: 30
  });
</script>

• if you want to change the value programmatically, use:

slider.setSliderValue(<sliderId>, <value>);

License

This project is licenced under the MIT License.