{{-- extend Layout --}} @extends('layouts.contentLayoutMaster') {{-- page title --}} @section('title','Range Slider') {{-- vendor styles --}} @section('vendor-style') @endsection {{-- page content --}} @section('content')

ion.RangeSlider is Easy, flexible and responsive range slider with skin support.

Basic Demo

Simple start and customising basic params

Start without params


    $("#range_01").ionRangeSlider();
Set Value

Set min value, max value and start point


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

Set type to double and specify range, also showing grid and adding prefix "$"


  $("#range_03").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$"
  });
Set up range and step

Set up range with negative values


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

Set up range with fractional values, using fractional step


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

One more example with strings


  $("#range_09").ionRangeSlider({
    grid: true,
    from: 3,
    values: [
      "January", "February", "March",
      "April", "May", "June",
      "July", "August", "September",
      "October", "November", "December"
    ]
  });
@endsection {{-- vendor script --}} @section('vendor-script') @endsection {{-- page scripts --}} @section('page-script') @endsection