Canvas Docs

Rangle Slider

Range Slider

Canvas bundles Ion.RangeSlider to create sleek single value and dual handle range inputs, ideal for price filters, numeric ranges, and stepped selectors. It attaches to a plain <input> and renders a fully styled, draggable slider.

Setup

Include the bundled stylesheet in the <head> and the plugin script before </body>, then call ionRangeSlider() on your input.

<!-- In <head> -->
<link rel="stylesheet" href="css/components/ion.rangeslider.css">

<!-- Markup -->
<label>Price</label>
<input class="range_01">

<!-- Before </body> -->
<script src="js/components/rangeslider.min.js"></script>
jQuery(".range_01").ionRangeSlider();

Structure

The control needs nothing more than an empty <input> with a class you can target. All behavior is set through the init options. Use type: "double" for a two handle range with from and to values.

<input class="range_02">
<input class="range_03">
// Single handle with min/max/start
jQuery(".range_02").ionRangeSlider({
  min: 100,
  max: 1000,
  from: 400
});

// Double handle with a currency prefix
jQuery(".range_03").ionRangeSlider({
  type: "double",
  prefix: "$",
  min: 0,
  max: 1000,
  from: 200,
  to: 800
});

// Grid, step, and negative range
jQuery(".range_05").ionRangeSlider({
  type: "double",
  grid: true,
  min: -1000,
  max: 1000,
  from: -500,
  to: 500,
  step: 250
});

// Custom string values
jQuery(".range_09").ionRangeSlider({
  grid: true,
  from: 3,
  values: [
    "January", "February", "March",
    "April", "May", "June",
    "July", "August", "September",
    "October", "November", "December"
  ]
});

Options

  • type: "single" (one handle, default) or "double" (range with from and to).
  • min / max: the numeric bounds of the slider.
  • from / to: starting positions of the handles.
  • step: increment between values, for example 250 or 0.1.
  • values: an array of custom labels, used instead of min/max. from/to become array indexes.
  • grid: true to draw a tick scale below the track.
  • prefix / postfix: text prepended or appended to displayed values, for example "$".

Tips

  • When you supply a values array, drive the handles with from/to as index positions, not raw numbers.
  • Fractional ranges work by pairing a decimal step (like 0.1) with decimal min/max.
Was this page helpful?