range-slider-fox v1.0.1

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:

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