DashByte - Premium Dashboard Template

Forms

Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

Basic Example

The track (the background) and thumb (the value) are both styled to appear the same across browsers.

Example range

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

Disabled range

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min & Max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

Example range

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value.

Example range

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Range Slider

Easy to use, flexible and responsive range slider with skin support.

Basic Example

Set min value, max value and start point.

$("#range1").ionRangeSlider({
  min: 100,
  max: 1000,
  from: 550
});

Range & Step

Set up range with negative values.

$("#range2").ionRangeSlider({
  type: 'double',
  grid: true,
  min: -1000,
  max: 1000,
  from: -500,
  to: 500
});

Custom Values

Set up you own numbers. It could be array or even strings.

var custom_values = [0, 10, 100, 1000, 10000, 100000, 1000000];

// be careful! FROM and TO should be index of values array
var my_from = custom_values.indexOf(10);
var my_to = custom_values.indexOf(10000);

$('#range3').ionRangeSlider({
  type: "double",
  grid: true,
  from: my_from,
  to: my_to,
  values: custom_values
});

Lock & Restrict

Lock or restrict handles or interval to prevent or limit movement. The example below is only the from handler are allowed to move.

$("#range4").ionRangeSlider({
  type: "double",
  min: 0,
  max: 10,
  from: 2,
  to: 8,
  grid: true,
  grid_snap: true,
  from_fixed: false,
  to_fixed: true
});

Working with Dates

Make a range slider using dates.

var lang = 'en-US';
var year = 2018;

function dateToTS (date) {
  return date.valueOf();
}

function tsToDate (ts) {
  var d = new Date(ts);

  return d.toLocaleDateString(lang, {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
    }
  );
}

$("#range5").ionRangeSlider({
  type: "double",
  grid: true,
  min: dateToTS(new Date(year, 10, 1)),
  max: dateToTS(new Date(year, 10, 20)),
  from: dateToTS(new Date(year, 10, 5)),
  to: dateToTS(new Date(year, 10, 15)),
  prettify: tsToDate
});

Skins

Check out the different look and feel of the range slider.

$('#range6').ionRangeSlider({
  type: 'double',
  grid: true,
  min: -1000,
  max: 1000,
  from: -500,
  to: 500,
  skin: 'round'
});

$('#range7').ionRangeSlider({
  type: 'double',
  grid: true,
  min: -1000,
  max: 1000,
  from: -500,
  to: 500,
  skin: 'square'
});

Shaira Diaz

Range

Basic Example

Disabled

Min & Max

Steps

Range Slider

Basic Example

Range & Step

Custom Values

Lock & Restrict

Working with Dates

Skins