Range input

Realization of capability of range input.

Demo

You can see demo page here

Installation

npm install range-input-slider --save

Documentation

Interface:

    const Slider = new InputRangeSlider(document.getElementById('slider'), {
        minPoint: 50,
        maxPoint: 100,
        min: 1,
        max: 200,
        step: 10,
        onValueChangeStop: (newValues) => {
            console.log('Change', newValues);
        },
        onValueChange: (newValues) => {
            console.log('Change', newValues);
        },
        serifs: [
            { position: 0, html: '<span style="color: red; font-size: 11px;">1</span>' },
            { position: 25, html: '<span style="font-size: 11px;">50</span>' },
            { position: 50, html: '<span style="color: green; font-size: 11px;">100</span>' },
            { position: 75, html: '<span style="font-size: 11px;">150</span>' },
            { position: 100, html: '<span style="color: red; font-size: 11px;">200</span>' }
        ],
        cssClasses: {
            wrapper: 'wrapper',
            lineWrapper: 'lineWrapper',
            line: 'line',
            control: 'control',
            activeRange: 'activeRange',
            serifs: 'serifs',
            serif: 'serif'
        }
    });

    Slider.init();

Methods

init - range input initialization

Settings

| Setting | Type | Description | Example | Required | | ------------- | ------------- | ------------- | ------------- | ------------- | | min | number | Minimum possible value of range | 1 | yes | | max | number | Maximum possible value of range | 100 | yes | | minPoint | number | Default value for minimum value. Default position of minimum value control will be determ by this value. | 1 | yes | | maxPoint | number | Default value for maximum value. Default position of maximum value control will be determ by this value.| 10 | yes | | step | number | Value of interval between control position. Default value is 1. | 5 | no | | element | HTMLElement | Element which will be a parent for range input element. | document.getElementById('price') | yes| | onValueChangeStop | function | Will be called every time when control position changing is stoped. | (newValues) => { console.log(min: ${newValues.min}, max: ${newValues.max} ); } | yes | | onValueChange | function | Will be called every time when control position is changed. | (newValues) => { console.log(min: ${newValues.min}, max: ${newValues.max} ); } | no | | serifs | array | Array of serifs. Serif is object with position - value in percents of left serif position and html - content of position. | [{ position: 0, html: '<span style="color: red">1</span>' }, { position: 0, html: '100' }] | no | | cssClasses | object | Classes for all internal elements of range input. | { wrapper: 'my-site-wrapper', lineWrapper: 'my-site-line-wrapper', line: 'my-site-line', control: 'my-site-control', activeRange: 'my-site-active-range', serifs: 'my-site-serifs', serif: 'my-site-serif' } | no |

Development

$ npm install
$ npm start

License

MIT