slider-fs-jq

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 [e-mail]: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