Package Exports

@maslick/radiaslider/circular/slider-circular

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@maslick/radiaslider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

=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)

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)

alt tag

License

This project is licenced under the MIT License.