@maslick/radiaslider

=radiaSlider=

a pure JavaScript circular/linear knob-style slider

Features

 * works on desktop, mobile and tablets
 * small size (minified ~6 Kb)
 * no dependencies
 * pure JavaScript (ES5)
 * Node.js friendly

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>

Get/set value programmatically

If you want to change the value programmatically, use:

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

To get the current value:

slider.sliders[<sliderId>].normalizedValue     // current value
slider.sliders[<sliderId>].ang_degrees         // current angle in degrees (circular only)
slider.sliders[<sliderId>].endAngle            // current angle in radians (circular only)
slider.sliders[<sliderId>].value               // current width in pixels  (linear only)

Using Node.js

Radiaslider can be used either in browser or as a Node.js module. Look for a React.js example here.

License

This project is licenced under the MIT License.