Main
Dashboard
6
Dashboard 1
Dashboard 2
Dashboard 3
Dashboard 5
Dashboard 6
School
Management
28
Student
Student Profile
Student Detail
Hostel
Students Table
search
Teacher Info
Teacher Details
Teacher Table
Class Info
Subject
Routine
Attendance
Exam Result
Exam Schedule
Setting
Collection Fees
Payment info
New Expense
Expense
Attendance
Book Info
Book List
Parents List
Parents
Form
Notice
Transport
Restaurant
Restaurant
7
Menu One
Menu Two
Menu Three
Favourite
Order List
Booking
Upload Menu
Apps
Charts
Flot
Morris
Chartjs
Chartist
Peity
Sparkle
Knob
Calender
Email
Profile
Widget
Features
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
Table
Basic
Datatable
Datatable Export
Datatable Row Select
Editable
Icons
Themify
Maps
Basic
Vector Map
Form
Basic Form
Miscellaneous
Invoice
Basic
Editable
Pages
Login
Register
Forgot password
Documentation
Logout
Webstrot Admin
Recent Notifications
02:34 PM
Mr. Ajay
5 members joined today
02:34 PM
Mr. Ajay
likes a photo of you
02:34 PM
Mr. Ajay
Hi Teddy, Just wanted to let you ...
02:34 PM
Mr. Ajay
Hi Teddy, Just wanted to let you ...
See All
2 New Messages
02:34 PM
Mr. Ajay
Hi Teddy, Just wanted to let you ...
02:34 PM
Mr. Ajay
Hi Teddy, Just wanted to let you ...
02:34 PM
Mr. Ajay
Hi Teddy, Just wanted to let you ...
02:34 PM
Mr. Ajay
Hi Teddy, Just wanted to let you ...
See All
Ajay
Upgrade Now
30 Days Trail
Profile
My Balance
My Task
My Calender
Inbox
Setting
Help
Lock Screen
Logout
Dashboard
Dashboard
UC-Range-Slider-Advance
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:
×
Search