You can find a demo of the slider on this page
The Slider is build as a classical MVC application. SliderModel contains business logic, SliderView displays data and SliderController handles user requests. Just create a new SliderController and pass initial parameters to the constructor.
| Variable | Description |
|---|---|
| min | Minimal value of range |
| max | Maximal value of range |
| step | Step size |
| label | Label visibility |
| orientation | Vertical or horizontal orientation |
| values | Initial values of handles |
| callbacks | Callbacks |
| Callback | Description |
|---|---|
| onMove(values:number[]) | Invoke after handler is moved passing new handle values |
| Method | Description | Type |
|---|---|---|
| getter/setter max | Maximal value of range | Number |
| getter/setter min | Minimal value of range | Number |
| getter/setter label | Show label | Boolean |
| getter value | Values of handlers | Number[] |
The snipped below adds the slider on a page:
let slider = new SliderController(document.querySelector('#slider'), {min: 0, max: 9});See also slider.ts for a sample jQuery plugin implementation wrapping the slider
