fsd4-slider

FSD4 Slider

This is a jQuery slider plugin.
Demo page

Git clone

After downloading run

npm install

To run development mode use

npm run dev

To build the project use

npm run build

To test use:

npm test

Table of contents

1. Basic usage
2. Config
3. subscribe
4. unsubscribe
5. setSliderOption
6. getSliderOption
7. UML Diagram

1. Basic usage

To turn div block into a slider use

$(element).slider()

2. Config

To controll the slider use config object:

$(element).slider({
  //parameters
})

By default slider will be created with following parameters:

{
  isRange: false,
  isVertical: false,
  valueLabelDisplayed: true,
  scaleDisplayed: true,
  min: 0,
  max: 100,
  step: 1,
  firstValue: 20,
  secondValue: 80,
}

3. Subscribe

To subscribe on slider parameter use:

interface Slider {
  subscribe(option: ModelOption, subscriber: (value: number | boolean) => void)
}

Example:

const slider = $(element).slider();
const subscriber = (value) => console.log(value);

slider.subscribe('firstValue', subscriber);

4. Unsubscribe

To unsubscribe use:

interface Slider {
  unsubscribe(option: ModelOption, subscriber: (value: number | boolean) => void)
}

Example:

const slider = $(element).slider();
const subscriber = (value) => console.log(value);

slider.subscribe('firstValue', subscriber);
slider.unsubscribe('firstValue', subscriber);

5. setSliderOption

Sets slider option. Has value and type check.

interface Slider {
  setSliderOption(option: ModelOption, value: State[ModelOption]): State[ModelOption]
}

Example:

const slider = $(element).slider();

slider.setSliderOption('firstValue', 20);

6. getSliderOption

Returns slider option value

interface Slider {
  getSliderOption(option: ModelOption): State[ModelOption]
}

Example:

const slider = $(element).slider();

console.log(slider.getSliderOption('firstValue'));