fsd4-slider v1.0.6

FSD4 Slider

This is a jQuery slider plugin.
Demo page

NPM

To install as a plugin use:

npm install fsd4-slider

Notice! Tests are not included in plugin package!

To add plugin to the project use:

import 'fsd4-slider';
import 'fsd4-slider/slider.css';

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
   1. MinValue
   2. MaxValue
   3. Step
   4. Default values
   5. Left handle value
   6. Right handle value
3. Range mode
4. Default values mode
5. Vertical mode
6. Hide limits
7. Hide value label
8. Callback function
9. Architecture

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:

{
  minValue: 0,
  maxValue: 100,
  step: 1,
  defaultValues: ["first", "second", "third"],
  leftHandleValue: 20,
  rightHandleValue: 80,
  isRange: false,
  hasDefaultValues: false,
  isVertical: false,
  limitsDisplayed: true,
  valueLabelDisplayed: true
}

Controll slider "in action"

To controll slider "in action" jQuery object will have a config property

let slider = $(element).slider()

//changing leftHandlevalue, using config property
slider.config.leftHandleValue(40)

The function will check the value, change it if needed and return the right one. For example:

let slider = $(element).slider({
  minValue: 0,
  maxValue: 100,
  leftHandleValue: 20
})

//lefthandleValue will be changed to minValue because given value is lower then minValue
let leftHandleValue = slider.config.leftHandleValue(-10)

alert(leftHandleValue) // 0

Getting a property

To get value use the same function with no arguments:

let slider = $(element).slider()

//returns current leftHandleValue
slider.config.leftHandleValue()

2.1 MinValue

Initialization:

You can choose any minValue you want

{
  minValue: 0
}

"In action":

minValue cannot be higher then maxValue or it will be changed to maxValue

slider.config.minValue(newValue)

2.2 MaxValue

Initialization:

maxValue cannot be lower then minValue or it will be changed to minValue

{
  maxValue: 100
}

"In action":

The same as for initialization

slider.config.maxValue(newValue)

2.3 Step

Initialization:

step cannot be lower then 1 or it will be change to 1

{
  step: 1
}

"In action":

The same as for initialization

slider.config.step(newValue)

2.4 Default values

defaultValues contains number or string array. If hasDefaultValues === true, handle values will contain indexes for defaultValues array

Initialization:

{
  defaultValues: ["first", "second", "third"]
}

"In action":

slider.config.defaultValues(["first", "second", "third"])

2.5 Left handle value

Initialization:

If hasDefaultValues === false, leftHandleValue cannot be lower then minValue and higher then maxValue If hasDefaultValues === true, leftHandleValue cannot be lower then 0 and higher then defaultValues.length - 1

{
  leftHandleValue: 20
}

"In action":

The same as for initialization but if isRange === true, leftHandleValue cannot be higher then rightHandleValue

slider.config.leftHandleValue(20)

2.5 Right handle value

If isRange === false, rightHandleValue will also contain maxValue or defaultValues.length -1 if hasDefaultValues === true

Initialization:

If hasDefaultValues === false, rightHandleValue cannot be lower then minValue and higher then maxValue If hasDefaultValues === true, rightHandleValue cannot be lower then 0 and higher then defaultValues.length - 1

{
  rightHandleValue: 80
}

"In action":

The same as for initialization but if isRange === true, rightHandleValue cannot be lower then leftHandleValue

slider.config.rightHandleValue(80)

3. Range mode

In range mode rightHandle will be appended to the scale. To initialize it use:

{
  isRange: true
}

Or, for "in action" changing:

slider.config.isRange(newValue)

If isRange === false, rightHandle will be removed from the scale, but rightHandle object will still exist and contain maxValue or defaultValues.length - 1

4. Default values mode

In default values mode slider uses defaultValues instead of calculating value accroding with step, minValue and maxValue

Can be switched on and off by

{
  hasDefaultValues: true
}

For "in action" change use

slider.config.hasDefaultValues(newValue)

When it`s on, minValue and maxValue will be ignored. Can be used with range and vertical modes

Notice! When hasDefaultValues === true, limitsDisplayed will be automatically turned off

5. Vertical mode

Switching between vertical and horizontal modes

Can be switched on and off by

{
  isVertical: true
}

For "in action" change use

slider.config.isVertical(newValue)

6. Hide limits

In this mode slider hides or shows minValue and maxValue labels

Can be switched on and off by

{
  limitsDisplayed: true
}

For "in action" change use

slider.config.limitsDisplayed(newValue)

Notice! When turned on, hasDefaultValues will be turned off automatically

7. Hide value label

In this mode slider hides or shows value labels above the handles

Can be switched on and off by

{
  valueLabelDisplayed: true
}

For "in action" change use

slider.config.valueLabelDisplayed(newValue)

7. Callback function

This function will be called if leftHandleValue or rightHandleValue are changed.

//function will receive leftHandleValue and rightHandleValue as parameters
function callbackFunction(leftHandleValue, rightHandleValue) {
  //some code
}

//it should be given to slider while initializing as a second parameter
$(element).slider(config, callbackFunction)