Dashboard
Dashboard 1
Profile
Widget
UI Elements
Accordion
Alerts
Badges
Button
Dropdown
Images
Components
Calendar
Carousel
Datamap
To do
Scrollable
Sweet Alert
Toastr
Basic Range Slider
Advance Range Slider
Nestable
Portlets
Charts
Flot
Table
Basic
Icons
Themify
Basic Form
Invoice
Basic
Editable
Pages
Login
Register
Forgot password
Documentation
Logout
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
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
1 000 000
2 000 000
1 000 000
2 000 000
1 000 000 — 2 000 000
1 000 000
1 250 000
1 500 000
1 750 000
2 000 000
But you can fix it with ease if you wish, with force_edges attribute:
1 000 000
2 000 000
1 000 000
2 000 000
1 000 000 — 2 000 000
1 000 000
1 250 000
1 500 000
1 750 000
2 000 000
Grid will set up automatically, just set grid to true:
0
10 000
0
10 000
0 — 10 000
0
2 500
5 000
7 500
10 000
Want more? Use grid_num:
0
10 000
0
10 000
0 — 10 000
0
1 000
2 000
3 000
4 000
5 000
6 000
7 000
8 000
9 000
10 000
Have predifined step? You can snap grid to it:
0
10 000
0
10 000
0 — 10 000
0
500
1 000
1 500
2 000
2 500
3 000
3 500
4 000
4 500
5 000
5 500
6 000
6 500
7 000
7 500
8 000
8 500
9 000
9 500
10 000
Even if you have a very strange step!
0
10
0
0
0
0
2.34
4.68
7.02
9.36
10
Sometimes you want to forbid dragging one or both handles. Try to move left handle, you can't.
0
100
30
70
30 — 70
You can even lock both handles
0
100
30
70
30 — 70
Sometimes you may want to show user full slider, but restict him from using it for 100%
0
100
0
0
30
You can also highlight this zone:
0
100
0
0
30
One more example with limits:
0
100
20
80
20 — 80
0
10
20
30
40
50
60
70
80
90
100
You can lock your slider, by using disable option:
0
100
0
0
30
After first focus, you can control slider by keyboard (arrow keys and WSAD):
0
100
30
70
30 — 70
Also you can set up keyboard step (in percents):
0
100
30
70
30 — 70
You can use native Date object if you wish, but moment.js is better!
June 29, 2024
June 29, 2025
0
0
December 29, 2024
Example with 12 hours time format
Jun 28th, 06:26 PM
Jun 29th, 06:26 AM
0
0
Jun 29th, 12:26 AM
Example with 24 hours time format and localisation to russian:
28-го июня, 18:26
29-го июня, 06:26
0
0
29-го июня, 00:26
28-го июня, 18:26
28-го июня, 21:26
29-го июня, 00:26
29-го июня, 03:26
29-го июня, 06:26
One more example, with localisation to japanese:
28日 6月, 午後6時26分
29日 6月, 午前6時26分
0
0
29日 6月, 午前12時26分
28日 6月, 午後6時26分
28日 6月, 午後9時26分
29日 6月, 午前12時26分
29日 6月, 午前3時26分
29日 6月, 午前6時26分
Set minimum interval size:
0
100
38
58
38 — 58
Set maximum interval size:
0
100
41
91
41 — 91
Dragging interval:
0
100
30
70
30 — 70
Copyright © 2019.Company name All rights reserved.
网页模板