Range Slider Fox

Range Slider Fox is an easy and simple range slider written in TypeScript as JQUERY plugin

---

• Version: 1.0
• Demo page
• Download ZIP

You can configure range slider as you need in the demonstration Panel and copy the configuration code from the column "Config code" by clicking "Copy code" button. Just don't forget to change the value inside еру parenthesis $(...).

Description:

• Adaptive and accessible design.
• Possibility of keyboard and touch control.
• Skin support (you can fully change appearance of the slider using css).
• Has 4 built-in themes.
• High performance because of thoughtful architecture.
• Cross-browser.
• Vertical view is supported.

Key features:

• Any amount of the sliders in the same page without conflicts and significant performance issues.
• Negative and fractional values are supported.
• Possibility to set custom step or jump from value to value of the grid.
• Possibility to switch off the elements of user interface.
• Postfixes and prefixes for you values.
• Dot sets its value in the value property if the slider is initialized on an input element.
• Configuration and manipulation via data-attributes is supported.
• You can block work of the slider.
• You can subscribe and unsubscribe events of the slider using its API (onStart, onChange, onReset, onUpdate).
• The slider supports external methods (renew, reset, destroy).
• The grid view is adapted on change of the slider width, which makes it fully adaptive.
• You can change the view of the slider any time: vertical or horizontal.
• Code of the plugin is compatible with ES5.

Dependencies:

• jQuery 1.2.x+

Usage:

Add the following libraries to the page:

• jQuery
• rangeSliderFox.js

Add the following stylesheets to the page:

• rangeSliderFox.css

Initialisation:

<input class="rslider__fox"  value="">

$('.rslider__fox').RangeSliderFox({
    type: 'double',
    theme: 'fox',
    min: -120,
    max: 800,
    to: 500,
    from: 200,
    bar: true,
    tipMinMax: true,
    tipFromTo: true,
    grid: true,
    gridSnap: false,
    gridNumber: 40,
    onStart: (data) => {
      console.log(data.type);
      console.log(data.orientation); 
      console.log(data.theme);
      console.log(data.min);
      console.log(data.max);
      console.log(data.from);
      console.log(data.to);
      console.log(data.step);
      console.log(data.keyStepOne);
      console.log(data.keyStepHold);
      console.log(data.bar);
      console.log(data.tipPrefix);
      console.log(data.tipPostfix);
      console.log(data.tipMinMax);
      console.log(data.tipFromTo);
      console.log(data.grid);
      console.log(data.gridSnap);
      console.log(data.gridNumber);
      console.log(data.gridStep);
      console.log(data.gridRound);
      console.log(data.disabled);
    },
    onChange:(data) => {
      console.log(data);
    },
    onUpdate:(data) => {
      console.log(data);
    },
    onReset:(data) => {
      console.log(data);
    }
})

Usage API:

const object = $(dom).RangeSliderFox({}).data('RangeSliderFox');

// This piece of code will change range values and set the dot on position 350.
object.update({
min:0,
max:600,
from:350
})

// unsubscribe from events
object.update({
  onStart:null,
  onChange:null,
  onUpdate:null,
  onReset:null
})


object.reset()

// reset - will reset all the setup to the values which were 
// passed on initialization or will take default values

object.destroy() 

// destroy - will destroy slider instance, DOM-elements and all related events.

Settings:

Option	Data-Attr	Default value (possible values)	Type	Description
type	data-type	'single' ('double')	string	Dot type (single or double)
orientation	data-orientation	'horizontal' ('vertical')	string	slider orientation (vertical or horizontal)
theme	data-theme	'base' ('fox' , 'dark', 'classic')	string	Pass the name of the theme. CSS-selector should have name like .rs-[name] (e.g. .rs-base)
min	data-min	0 (-n, n.n..)	number	Minimal value of the range
max	data-max	10 (-n, n.n..)	number	Maximal value of the range
to	data-to	2 (-n, n.n..)	number	Second dot position
from	data-from	1 (-n, n.n..)	number	First dot position
step	data-step	0 (n, n.n.. <= max-min)	number	Step of the dot mooving
keyStepOne	data-key-step-one	0 (max-min)	number	Step of the dot mooving on keyboard key single pressing
keyStepHold	data-key-step-hold	0 (max-min)	number	Step of the dot mooving on keyboard key holding
bar	data-bar	false	boolean	Progrees-bar view (shown or hidden)
tipPrefix	data-tip-prefix	'' (char…)	string	Prefix for hints (15 characters maximum)
tipPostfix	data-tip-postfix	'' (char…)	string	Postfix for hints (15 characters maximum)
tipMinMax	data-tip-min-max	true	boolean	MinMax hints view (on or off)
tipFromTo	data-tip-from-to	true	boolean	FromTo hints view (on or off)
grid	data-grid	false	boolean	Scale view (on or off)
gridSnap	data-grid-snap	false	boolean	Dot can stop between scale marks (yes or no)
gridNumber	data-grid-num	0 (n, n.n..)	number	Amount of intervals the scale is split into
gridStep	data-grid-step	0 (n, n.n..)	number	Amount of steps in the interval
gridRound	data-grid-round	0 (n)	number	Fractional rounding
disabled	data-disabled	false	boolean	Slider enabled or disabled
onStart	-	null	Function	Call a callback function after the first start of the plugin and pass an object of current configuration data as an argument
onChange	-	null	Function	Call a callback function after each user’s interaction with the slider and pass an object of current configuration data as an argument
onUpdate	-	null	Function	Call a callback function after “update” method calling and pass an object of current configuration data as an argument
onReset	-	null	Function	Call a callback function after “reset” method calling and pass an object of current configuration data as an argument

details

• only one of values gridNumber or gridStep can be set for scale. If both of them are set, gridStep will be ignored

• gridSnap is ignored if one of parameters step, keyStepOne, keyStepHold is set

• step is ignored while keyboard controlling if one of parameters keyStepOne, keyStepHold is set

Setup

• Install:

  npm i range-slider-fox