Bootstrap-slider

Bootstrap slider is an interactive component that lets the user swiftly slide through possible values spread on the desired range.

please refer Bootstrap-slider 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 href="{{ asset('vendors/bootstrap-slider/css/bootstrap-slider.min.css') }}" rel="stylesheet" type="text/css" />

Step 2

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

<script src="{{ asset('vendors/bootstrap-slider/js/bootstrap-slider.js') }}" type="text/javascript"></script>

Step 3

write HTML markup for it.

ex:

<div class="form-group">
 <input id="ex1" data-slider-id='ex1Slider' type="text" class="slider-handle min-slider-handle round"  data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</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

 $('#ex1').bootstrapSlider({});

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