Atmos
Search…
Getting Started
Build System
Gulp
Page Structure
Sass Modules
UI Elements
Colors
Buttons
Icons
Cards
Alerts
Modals
Avatar
Tables
Mail Templates
forms
Form Layouts
Switch
Tag Input
Radio Box
Select2
Datepickers
Masked Input
Rangeslider
Dropzone Fileupload
Form Wizard
Form Validation
Charts
Charts
Apex Charts
Chartjs
Google Charts
Chartist
Maps
Google Maps
Vector Maps
Starter Template
blank template Markup
Powered By
GitBook
Rangeslider
We have used jQueryUI range slider for input range slider inputs.
Step 1
Include jQueryUI stylesheet before atmos theme Stylesheet to make sure it properly overrides the UI according to our needs
1
<
link
rel
=
"
stylesheet
"
href
=
"
assets/vendor/jquery-ui/jquery-ui.min.css
"
>
Copied!
Step 2
Add jqueryUI JavaScript files if not included already.
1
<
script
src
=
"
assets/vendor/jquery-ui/jquery-ui.min.js
"
type
=
"
text/javascript
"
>
</
script
>
Copied!
Step 3
Add markup
1
<
div
class
=
"
input-slider
"
>
</
div
>
Copied!
Step 4
Initialize the plugin
1
$
(
".input-slider"
).
slider
({
2
range
:
"min"
,
3
});
Copied!
Slider | jQuery UI
forms - Previous
Masked Input
Next - forms
Dropzone Fileupload
Last modified
3yr ago
Copy link
Contents