Ionrangeslider

Ionrangeslider is an easy, flexible and responsive range slider with tons of options.

please refer Ionrangeslider documentation (opens new window) to learn more about plugin

How to use

Step 1

include following css code in the page you want to use inside @section('header_styles') section

 <link rel="stylesheet" href="{{ asset('vendors/ion_rangeslider/css/ion.rangeSlider.css') }}" />

Step 2

include following js code at @section('footer_scripts') section

<script src="{{ asset('vendors/ion_rangeslider/js/ion.rangeSlider.js') }}" ></script>

Step 3

write HTML markup for it.

ex:

 <label class="col-md-2 control-label">Basic Slider</label>
     <div>
       <input id="example_1" class="form-control" type="text" name="" value="" />
     </div>

Step 4

now, we need to initialize the plugin

you can place below code inside footer_scripts section or for better management, you can keep in a separate js file and reference that file in the current page.

Note: be sure to place initialization code below plugin js file

$("#example_1").ionRangeSlider({
});

Output

more examples

We have added many more examples and customization.

you can find code in following pages resources/views/admin/sliders.blade.php and resources/js/pages/sliders.js

Used In

resources/views/admin/sliders.blade.php