Touch-enabled Progressive Enhancement Range Slider - jQuery Quinn

A range slider is a great way to represent quantities. It is a graphical control element that allows users to select a value from a continuous range. It's the conversion of a continuous value, like a distance or a size, into a series of discrete values, usually numbers.

It's normally used as an input field on pages where the user needs to select one or more solutions from a predefined set. It's perfect for choosing time duration (work shifts for example), selecting food items in menus, selecting transport options and other things that have predefined amounts.

Quinn is a lightweight jQuery plugin that provides a straightforward method of creating custom, touch-enabled, progressive enhancement range sliders, which gracefully degrade to standard range inputs when JavaScript is unavailable.

Not only single value, the slider control allows the user to select numerical values between two/or more constraints.

See Also:

• 10 Best Range Slider Plugins In JavaScript

How to use it:

1. Load the Quinn plugin and other required resources in the document.

<!-- Required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/underscore-min.js"></script>

<!-- jQuery Quinn Plugin -->
<link rel="stylesheet" href="quinn.css" />
<script src="/path/to/jquery.quinn.min.js"></script>

2. Initialize the plugin to generate a basic range slider.

<div class="slider"></div>

$('.slider').quinn({
  // options here
});

3. Or initialize the plugin on the existing range input.

<input type="range" value="0" />

$('input[type=range]').quinn({
  // options here
});

4. Output the current value using the change callback.

$('.slider').quinn({
  change: function (newValue, slider) {
    console.log(newValue);
  }
});

5. Apply your own styles to the slider.

.slider {
  height: 5px;
}

.slider .bar .left, .slider .bar .main, .slider .bar .right,
.slider .active-bar .left, .slider .active-bar .main,
.slider .active-bar .right, .slider .handle {
  background-image: url(bg.png);
}

.slider .bar, .slider .bar .left, .slider .bar .main,
.slider .bar .right, .slider .active-bar .left,
.slider .active-bar .main, .slider .active-bar .right {
  height: 25px;
}

.slider .handle {
  height: 24px;
  width: 24px;
}

6. Available options to customize the range slider.

$('.slider').quinn({

  // minimum value
  min: 0,

  // maximum value
  max: 100,

  // If you wish the slider to be drawn so that it is wider than the
  // range of values which a user may select, supply the values as a
  // two-element array.
  drawTo: null,

  // step size
  step: 1,

  // initial value
  value: null,

  // Snaps the initial value to fit with the given "step" value. For
  // example, given a step of 0.1 and an initial value of 1.05, the
  // value will be changes to fit the step, and rounded to 1.1.
  //
  // Notes:
  //
  //  * Even with `strict` disabled, initial values which are outside
  //    the given `min` and `max` will still be changed to fit within
  //    the permitted range.
  //
  //  * The `strict` setting affects the *initial value only*.
  strict: true,

  // Restrics the values which may be chosen to those listed in the 
  // `only` array.
  only: null,

  // Disables the slider when initialized so that a user may not change 
  // it's value.
  disable: false,

  // By default, Quinn fades the opacity of the slider to 50% when
  // disabled, however this may not work perfectly with older Internet
  // Explorer versions when using transparent PNGs. Setting this to 1.0
  // will tell Quinn not to fade the slider when disabled.
  disabledOpacity: 0.5,

  // If using Quinn on an element which isn't attached to the DOM, the
  // library won't be able to determine it's width; supply it as a
  // number (in pixels).
  width: null,

  // If using Quinn on an element which isn't attached to the DOM, the
  // library won't be able to determine the width of the handle; suppl
  // it as a number (in pixels).
  handleWidth: null,

  // Enables a slightly delay after keyboard events, in case the user
  // presses the key multiple times in quick succession. False disables,
  // otherwise provide a integer indicating how many milliseconds to
  // wait.
  keyFloodWait: false,

  // When using animations (such as clicking on the bar), how long
  // should the duration be? Any jQuery effect duration value is
  // permitted.
  effectSpeed: 'fast',

  // Set to false to disable all animation on the slider.
  effects: true,

});

7. Callbacks and functions.

$('.slider').quinn({

  // A callback which is run when changing the slider value. Additional
  // callbacks may be added with Quinn::on('drag').
  //
  // Arguments:
  //   number: the altered slider value
  //   Quinn:  the Quinn instance
  //
  drag: null,

  // Run after the user has finished making a change.
  //
  // Arguments:
  //   number: the new slider value
  //   Quinn:  the Quinn instance
  //
  change: null,

  // Run once after the slider has been constructed.
  //
  // Arguments:
  //   number: the current slider value
  //   Quinn:  the Quinn instance
  //
  setup: null,

  // An optional class which is used to render the Quinn DOM elements
  // and redraw them when the slider value is changed. This should be
  // the class; Quinn will create the instance, passing the wrapper
  // element and the options used when $(...).quinn() is called.
  //
  // Arguments:
  //   Quinn:  the Quinn instance
  //   object: the options passed to $.fn.quinn
  //
  renderer: Quinn.Renderer,

});

Changelog:

v1.2.2 (2022-05-24)

• Fix handle position in default CSS.

---

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