# 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.


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

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




# 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


Last Updated: 2/13/2021, 3:18:10 PM