Dashboard
Dashboard 1
Dashboard 2
Calender
Email
Profile
Widget
UI Elements
Accordion
Alerts
Badges
Button
Dropdown
Images
List Group
Panels
Progressbar
Tab
Wells
Components
Calendar
Carousel
Weather
Datamap
To do
Scrollable
Sweet Alert
Toastr
Basic Range Slider
Advance Range Slider
Nestable
Portlets
Bar Rating
jRate
Charts
Flot
Chartjs
Peity
Sparkle
Knob
Table
Basic
Datatable
Datatable Export
Datatable Row Select
Editable
Icons
Themify
Maps
Vector Map
Basic Form
Invoice
Basic
Editable
Pages
Login
Register
Forgot password
Documentation
Logout
2
Recent Notifications
02:34 PM
Mr. Jane
5 members joined today
02:34 PM
Mariam
likes a photo of you
02:34 PM
Tasnim
Hi Teddy, Just wanted to let you ...
02:34 PM
Jane Roe
Hi Teddy, Just wanted to let you ...
See All
21
2 New Messages
02:34 PM
Jane Doe
Hi Teddy, Just wanted to let you ...
02:34 PM
Jane Roe
Hi Teddy, Just wanted to let you ...
02:34 PM
Jane Doe
Hi Teddy, Just wanted to let you ...
02:34 PM
Jane Roe
Hi Teddy, Just wanted to let you ...
See All
Jane
Upgrade Now
30 Days Trail
Profile
My Balance
My Task
My Calender
Inbox
Setting
Help
Lock Screen
Logout
Test 2
Test 2
Rufat Askerov
Alice
Michael Scofield
Irina Shayk
Sara Tancredi
Jane
Dashboard 1
Dashboard
Blank
As you see, slider labels are far away outside it's container
But you can fix it with ease if you wish, with force_edges attribute:
Grid will set up automatically, just set grid to true:
Want more? Use grid_num:
Have predifined step? You can snap grid to it:
Even if you have a very strange step!
Sometimes you want to forbid dragging one or both handles. Try to move left handle, you can't.
You can even lock both handles
Sometimes you may want to show user full slider, but restict him from using it for 100%
You can also highlight this zone:
One more example with limits:
You can lock your slider, by using disable option:
After first focus, you can control slider by keyboard (arrow keys and WSAD):
Also you can set up keyboard step (in percents):
You can use native Date object if you wish, but moment.js is better!
Example with 12 hours time format
Example with 24 hours time format and localisation to russian:
One more example, with localisation to japanese:
Set minimum interval size:
Set maximum interval size:
Dragging interval: