FSDSlider

Demo page

Table of contents

1. Quick start
2. Config 2.1 Options 2.2 Methods
3. Building and testing
4. Architecture

1. Quick start

1. Install plugin via npm:

npm install slider-fs-jq

2. Import JQuery and plugin in your project:

import $ from 'jquery';
import 'slider-fs-jq';

3. Initialize plugin:

<div class="my-selector"></div>

$('.my-selector').slider(); // Init slider with default options

or if you want to init slider with options - invoke slider with one parameter which contains options

$('.my-selector').slider({
  // options
});

2. Config

2.1 Options

A brief description of options:

| Option name | Type | Default Value | Description | ------------- |:---------------------:| :-------------:| ----------| | min | number | 0 | set minimum value for slider | | max | number | 100 | set maximum value for slider | | step | number | 1 | the number by which slider value will be increased | | firstValue | number | 0 | value of left handle | | secondValue | number | 100 | value of right handle | | isHorizontal | boolean | true | set the orientation slider | | showBubbles | boolean | true | show/hide suggestions above handles | | showScale | boolean | false | show/hide scale below slider | | hasRange | boolean | false | set two handles in range | | multiplier | number | 1 | the value by which will be increase step scale | | customValues | boolean | false | set custom values for slider | | values | (number l string)[] | null | array of custom values for slider | | autofix | boolean | false | enable/disable autofix scale units | | fixConfig | object | { distance: 45, count: null} | config for autofix, distance - is need distance between two neighbor units, count - need count unit |

Full description for options:

isHorizontal

This option set orientation of slider.

$('.my-selector').slider({
  isHorizontal: false
});

Output:

showBubbles

This option show/hide suggestions above handles.

$('.my-selector').slider({
  showBubbles: true
});

Output:

showScale

This option show/hide scale below slider.

$('.my-selector').slider({
  showScale: true
});

Output:

hasRange

This option set two handles in range.

$('.my-selector').slider({
  hasRange: true
});

Output:

Important! If you define the range, program use only firstValue and secondValue, value isn't used and backward.

multiplier

This option set number bu which increase step scale. In plugin logic calculate scale - (max - min) / step. Let's say we init plugin without this option:

$('.my-selector').slider({
  showScale: true
});

We will get it:

Not good, isn't it?

If we init slider with multiplier:

$('.my-selector').slider({
  showScale: true,
  multiplier: 10
});

At this time, we will get:

That's much better!

customValues & values

This options set custom values for slider.

$('.my-selector').slider({
  customValues: true,
  values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  showScale: true
});

Output:

Important! With options must be defined together. Otherwise, will be throw error. And values been index of arr. Example, in this slider value = 0.

2.2 Methods

update

This method allows to update options in slider and rerender him.

const slider = $('.my-selector').slider({
  min: -100,
  max: 200,
});

slider.update({
  min: 200,
  max: 1000,
  step: 100,
});

getOptions

This method return current options. Example:

const slider = $('.my-selector').slider();
const sliderOptions = slider.getOptions();
/*
  Output: {
    min: 0,
    max: 100,
    step: 1,
    value: 0,
    firstValue: 0,
    secondValue: 100,
    isHorizontal: true,
    showBubbles: true,
    showScale: false,
    hasRange: false,
    multiplier: 1,
    values: null,
    customValues: false,
    autofix: false,
    fixConfig: {
      distance: 45,
      count: null,
    }
  }
 */

bindInput

This method can chain any input with a slider.

By default, the slider creates three hidden inputs and chain them with values. So that, chain input will need to invoke method bindInput and give him input and id(property name).

You must chain with right id, because if you use the single slider and chain input with "firstValue" - it's not working.

Example:

<input type="text" name="value">

const slider = $('.my-selector').slider();
const input = document.querySelector('input[name=value]');
slider.bindInput(input, 'value');

or with range slider:

<input type="text" name="min-value">
<input type="text" name="max-value">

const slider = $('.my-selector').slider();
const minInput = document.querySelector('input[name=min-value]');
const maxInput = document.querySelector('input[name=max-value]');

slider.bindInput(minInput, 'firstValue');
slider.bindInput(maxInput, 'secondValue');

Also, you can chain again and old input will be unchaining.

Important! your inputs must be named. Otherwise, will throw an error.

subscribe

This method can subscribe on changes in program. This method receive callback and the name of the action which you can subscribe. Possible names: | Action name | Type of argument to pass | Description | ------------- |:---------------------:| ----------| | optionsUpdate | IOptions | provide new options for callback-subscriber. Invoke each times when options updated. | | valueUpdate | ViewPosition | provide object which have current value and ratio for position. Invoke each times when value updated. | | dragUpdate | RatioData | provide object which have current ratio for position and if slider has range - id handle. Invoke each times when handle been dragged. | | scaleClick | RatioData | provide object which have current ratio for position. Invoke each times when bar has been clicked. | | unitClick | RatioData | provide object which have current ratio for position. Invoke each times when scale unit has been clicked. | | intervalValueUpdate | ViewPosition | provide object which have current ratio for position, value and id handle. Invoke each times when value has been updated. |

3. Building and testing

Clone repository and install dependencies:

git clone [email protected]:sodiqit/FSDSlider.git 
npm i

Run server on localhost:

npm start

Building project:

npm run build

For run test:

npm test

or if you want to check lines coverage

npm run test:coverage