Fobia Admin
Mark Jhonsan
My Profile
Setting
Logout
MAIN NAVIGATION
Dashboard
Page Dashboard
Post Dashboard
Ads Dashboard
UI Elements
Typography
Cards
Buttons
Nav Tabs
Accordions
Modals
List Groups
BS Elements
Pagination
Alerts
Progress Bars
Checkboxes & Radios
Notifications
Sweet Alerts
Components
Range Sliders
Image Carousels
Grid Layouts
Switcher Buttons
Pricing Tables
Vertical Timeline
Horizontal Timeline
Fancy Lightbox
Color Palette
Charts
Chart JS
Morris Charts
Sparkline Charts
Peity Charts
Other Charts
UI Icons
Font Awesome
Material Design
Themify Icons
Line Icons
Flag Icons
Calendar
New
Mailbox
12
Inbox
Compose
Read Mail
Forms
Basic Inputs
Input Groups
Form Layouts
Form Advanced
Form Uploads
Form Validation
Form Wizard
Form Editor
Authentication
SignIn 1
SignUp 1
SignIn 2
SignUp 2
Lock Screen
Reset Password 1
Reset Password 2
Widgets
10
Tables
Simple Tables
Data Tables
Maps
Google Maps
Vector Maps
Sample Pages
Invoice
User Profile
Blank Page
Coming Soon
403 Error
404 Error
500 Error
Multilevel
Level One
Level One
Level Two
Level Two
Level Three
Level Three
Level One
LABELS
Important
Warning
Information
12
You have 12 new messages
12
Jhon Deo
Lorem ipsum dolor sit amet...
Today, 4:10 PM
Sara Jen
Lorem ipsum dolor sit amet...
Yesterday, 8:30 AM
Dannish Josh
Lorem ipsum dolor sit amet...
5/11/2018, 2:50 PM
Katrina Mccoy
Lorem ipsum dolor sit amet.
1/11/2018, 2:50 PM
See All Messages
14
You have 14 Notifications
14
New Registered Users
Lorem ipsum dolor sit amet...
New Received Orders
Lorem ipsum dolor sit amet...
New Updates
Lorem ipsum dolor sit amet...
See All Notifications
English
French
Chinese
German
Sarajhon Mccoy
mccoy@example.com
Inbox
Account
Setting
Logout
Range Slider
Fobia
Components
Range Slider
Setting
Action
Another action
Something else here
Separated link
Range Slider
Start without params
10
100
0
0
10
Set min value, max value and start point
100
1 000
0
0
550
Set type to double and specify range, also showing grid and adding prefix "$"
$0
$1 000
$200
$800
$200 — $800
0
250
500
750
1 000
Set up range with negative values
-1 000
1 000
-500
500
-500 — 500
-1 000
-500
0
500
1 000
Using step 250
-1 000
1 000
-500
500
-500 — 500
-1 000
-500
0
500
1 000
Set up range with fractional values, using fractional step
-12.8
12.8
-3.2
3.2
-3.2 — 3.2
-12.8
-6.4
0
6.4
12.8
Set up you own numbers
0
1 000 000
10
100 000
10 — 100 000
0
10
100
1 000
10 000
100 000
1 000 000
Using any strings as your values
zero
ten
0
0
five
zero
one
two
three
four
five
six
seven
eight
nine
ten
One more example with strings
January
December
0
0
April
January
February
March
April
May
June
July
August
September
October
November
December
No prettify. Big numbers are ugly and unreadable
1000
1000000
0
0
100000
1000
250750
500500
750250
1000000
Prettify enabled. Much better!
1 000
1 000 000
0
0
200 000
1 000
250 750
500 500
750 250
1 000 000
Don't like space as separator? Use anything you like!
1.000
1.000.000
0
0
300.000
1.000
250.750
500.500
750.250
1.000.000
You don't like default prettify function? Use your own!
546
8077
0
0
340138
197
55611
306682
374485
605024
Using prefixes
$0
$10 000
$1 000
$10 000
$1 000 — $10 000
0
2 500
5 000
7 500
10 000
Using postfixes
-90°
90°
0
0
0°
-90
-45
0
45
90
Whant to show that max number is not the biggest one?
Age 18
Age 70+
0
0
Age 30
18
31
44
57
70
Taking care about how from and to values connect? Use decorate_both option:
Weight: 100 million pounds
Weight: 200 million pounds
Weight: 145 million pounds
Weight: 155 million pounds
Weight: 145 million pounds — Weight: 155 million pounds
Remove double decoration
Weight: 100 million pounds
Weight: 200 million pounds
Weight: 145 million pounds
Weight: 155 million pounds
Weight: 145 — 155 million pounds
Use your own separator symbol with values_separator option. Like →
Weight: 100 million pounds
Weight: 200 million pounds
Weight: 148 million pounds
Weight: 152 million pounds
Weight: 148 million pounds → Weight: 152 million pounds
Or " to ":
Range: 100 light years
Range: 200 light years
Range: 148 light years
Range: 152 light years
Range: 148 to 152 light years
You can disable all the sliders visual details, if you wish. Like this:
0
1
0
0
0
Or hide any part you wish
0
1
0
0
0
1 000
1 250
1 500
1 750
2 000
And some more
1 000
2 000
0
0
0
And some more
0
1
1 200
1 800
1 200 — 1 800