Dashboard
Users
Settings
5
You have 5 notifications
New user registered
User deleted
Sales report is ready
New client
Server overloaded
Server
CPU Usage
348 Processes. 1/4 Cores.
Memory Usage
11444GB/16384MB
SSD 1 Usage
243GB/256GB
15
You have 5 pending tasks
Upgrade NPM & Bower
0%
ReactJS Version
25%
VueJS Version
50%
Add new layouts
75%
Angular 2 Cli Version
100%
View all tasks
7
You have 4 messages
John Doe
Just now
Important message
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
John Doe
5 minutes ago
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
John Doe
1:52 PM
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
John Doe
4:03 PM
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
View all messages
Account
Updates
42
Messages
42
Tasks
42
Comments
42
Settings
Profile
Settings
Payments
42
Projects
42
Lock Account
Logout
Dashboard
NEW
Theme
Colors
Typography
Components
Base
Breadcrumb
Cards
Carousel
Collapse
Jumbotron
List group
Navs
Pagination
Popovers
Progress
Scrollspy
Switches
Tabs
Tooltips
Buttons
Buttons
Brand Buttons
Buttons Group
Dropdowns
Loading Buttons
PRO
Charts
Editors
Code Editor
PRO
Markdown
PRO
Rich Text Editor
PRO
Forms
Basic Forms
Advanced
PRO
Validation
PRO
Google Maps
PRO
Icons
CoreUI Icons
NEW
Flags
Font Awesome
4.7
Simple Line Icons
Notifications
Alerts
Badge
Modals
Toastr
PRO
Plugins
Calendar
PRO
Draggable
PRO
Sliders
PRO
Spinners
PRO
Tables
Standard Tables
DataTables
PRO
Widgets
NEW
Extras
Pages
Login
Register
Error 404
Error 500
Apps
Invoicing
Invoice
PRO
Email
Inbox
PRO
Message
PRO
Compose
PRO
Labels
Label danger
Label info
Label warning
System Utilization
CPU Usage
348 Processes. 1/4 Cores.
Memory Usage
11444GB/16384MB
SSD 1 Usage
243GB/256GB
Home
Admin
Dashboard
Dashboard
Settings
Ion.RangeSlider
CoreUI Pro Component
docs
Start without params
Set min value, max value and start point
Set type to double and specify range, also showing grid and adding prefix "$"
Set up range with negative values
Using step 250
Set up range with fractional values, using fractional step
Set up you own numbers
Using any strings as your values
One more example with strings
No prettify. Big numbers are ugly and unreadable
Prettify enabled. Much better!
Don't like space as separator? Use anything you like!
You don't like default prettify function? Use your own!
Using prefixes
Using postfixes
Whant to show that max number is not the biggest one?
Taking care about how from and to values connect? Use decorate_both option:
Remove double decoration
Use your own separator symbol with values_separator option. Like →
Or " to ":
You can disable all the sliders visual details, if you wish. Like this:
Or hide any part you wish
And some more
And some more