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.

$(function(){
  $('.example').alRangeSlider();
});

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

// from a range object
$('.example').alRangeSlider({
  range: {
    min: 0,
    max: 100,
    step: 1
  },
});

// from a values array, takes priority over 'range' and 'pointsMap'
$('.example').alRangeSlider({
  valuesArray?: number[] | string[];
});

// a points map, takes priority over 'range'
$('.example').alRangeSlider({
  pointsMap?: Record<number, TPointValue>;
});

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

$('.example').alRangeSlider({
  orientation: "vertical",
});

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

$('.example').alRangeSlider({
  theme: "dark",
});

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

$('.example').alRangeSlider({
  grid: {
    minTicksStep: 1,
    marksStep: 1
  },
  showTooltips: true,
  collideTooltips: true,
  tooltipsSeparator: " → "
});

8. More configuration options.

$('.example').alRangeSlider({

  // 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.

$('.example').alRangeSlider({
  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);
instance.alRangeSlider('disable');

// 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.