Beautiful Custom Slider Control Plugin - jQuery AlRangeSlider

File Size: 38 KB
Views Total: 3522
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Beautiful Custom Slider Control Plugin - jQuery AlRangeSlider

AlRangeSlider is a jQuery plugin that lets you generate pretty nice, highly customizable, user-friendly slider controls on the webpage.

Key Features:

  • Horizontal & Vertical layouts.
  • Dark and Light themes.
  • Fully responsive design.
  • Custom marks, ticks, steps, tooltips, etc.
  • Written in TypeScript and SCSS.

How to use it:

1. Add jQuery library and the AlRangeSlider plugin's files to the page.

<link rel="stylesheet" href="css/al-range-slider.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/al-range-slider.js"></script>

2. Create a container to hold the range slider.

<div class="example"></div>

3. Initialize the plugin to generate a default range slider.


4. Customize the min/max values and step size.

// from a range object
  range: {
    min: 0,
    max: 100,
    step: 1

// from a values array, takes priority over 'range' and 'pointsMap'
  valuesArray?: number[] | string[];

// a points map, takes priority over 'range'
  pointsMap?: Record<number, TPointValue>;

5. Set the orientation of the range slider. Default: "horizontal".

  orientation: "vertical",

6. Enable the dark mode. Default: "light".

  theme: "dark",

7. Customize the marks, ticks, steps, tooltips, etc.

  grid: {
    minTicksStep: 1,
    marksStep: 1
  showTooltips: true,
  collideTooltips: true,
  tooltipsSeparator: " → "

8. More configuration options.


  // initial value
  initialSelectedValues: {
    to: 0

  // the argument of .toFixed(), used for rounding fractional values
  valuesPrecision: 4,

  // toggles knobs collision and prevents them from passing through each other
  collideKnobs: true,

  // enables smooth transitions
  allowSmoothTransition: true,

  // shows input fields
  showInputs: true,

9. Callback functions.

  onInit: (IState) => void,
  onStart: (IState) => void,
  onFinish: (IState) => void,
  onChange: (IState) => void,
  onUpdate: (IState) => void,

interface IState {
  // an object where the keys are IDs and the values are [position, value] tuples
  selectedPoints?: Record<string, TPoint>;

  // an object where the keys are IDs and the values are position limits
  selectedPointsLimits?: Record<string, { min: number; max: number }>;

  // an object where the keys are IDs and the values are selected values 
  selectedValues?: Record<string, TPointValue>;

  // an object where the keys are IDs and the values are prettified selected values
  selectedPrettyValues?: Record<string, string>;

  // a tuple, last selected position
  currentPosition?: [id: string, position: number];

  // a tuple, last selected limits
  currentPositionLimits?: [id: string, limits: { min: number; max: number }];

  // a tuple, last active status
  currentActiveStatus?: [id: string, active: boolean];

  // a tuple, last selected value
  currentValue?: [id: string, value: string];

9. API methods.

const instance = $('.example').alRangeSlider();

// enable/disable the range slider
instance.alRangeSlider('disable', false);

// restart the range slider
sliderInstance.alRangeSlider('restart', {
  // options here

// update the range slider
sliderInstance.alRangeSlider('update', {
  values: { from: -10, to: 10 },

This awesome jQuery plugin is developed by Aleinbanger. For more Advanced Usages, please check the demo page or visit the official website.