Solaris Design System

Range, sliders and ratings

Range, sliders and ratings are used to select information from a user.

Sliders

Sliders allows users to select a single numbers between the lowest to the highest.

States Emotive
Slider: 8px
Mark: 20px (24px on hover, focus, active)
Numbers: 8px margin
font-size: 16px		 Productive
Slider: 8px
20px (24px on hover, focus, active)
Numbers: 8px margin
Font-size: 14px
:enabled Enabled slider emotive theme light Enabled slider emotive theme dark Enabled slider productive horizontal theme light Enabled slider productive horizontal theme dark
:hover Hover slider emotive theme light Hover slider emotive theme dark Hover slider productive horizontal theme light Hover slider productive horizontal theme dark
:focus Focus slider emotive theme light Focus slider emotive theme dark Focus slider productive horizontal theme light Focus slider productive horizontal theme dark
:active Active slider emotive theme light Active slider emotive theme dark Active slider productive horizontal theme light Active slider productive horizontal theme dark
With label Label slider emotive theme light Label slider emotive theme dark Label slider productive horizontal theme light Label slider productive horizontal theme dark
With numbers Label slider numbers emotive theme light Label slider numbers emotive theme dark Label slider numbers productive horizontal theme light Label slider numbers productive horizontal theme dark
With input Label slider input emotive theme light Label slider input emotive theme dark Label slider input productive horizontal theme light Label slider input productive horizontal theme dark

Range

Range allows users to select between the lowest to the highest option available.

States Emotive
Slider: 8px
Mark: 20px (24px on hover, focus, active)
Numbers: 8px margin
font-size: 16px		 Productive
Slider: 8px
20px (24px on hover, focus, active)
Numbers: 8px margin
Font-size: 14px
:enabled Enabled range emotive theme light Enabled range emotive theme dark Enabled range productive horizontal theme light Enabled range productive horizontal theme dark
:hover Hover range emotive theme light Hover range emotive theme dark Hover range productive horizontal theme light Hover range productive horizontal theme dark
:focus Focus range emotive theme light Focus range emotive theme dark Focus range productive horizontal theme light Focus range productive horizontal theme dark
:active Active range emotive theme light Active range emotive theme dark Active range productive horizontal theme light Active range productive horizontal theme dark
With label Label range emotive theme light Label range emotive theme dark Label range productive horizontal theme light Label range productive horizontal theme dark
With numbers Label range numbers emotive theme light Label range numbers emotive theme dark Label range numbers productive horizontal theme light Label range numbers productive horizontal theme dark
With input Label range input emotive theme light Label range input emotive theme dark Label range input productive horizontal theme light Label range input productive horizontal theme dark

Ratings

Ratings allows users to rate from lowest to highest of numbers or emotion. From left being lowest, and right being highest.

States Emotive
Slider: 8px
Selected: 24px
Unselected: 8px (focus, active: 16px)
Margin: 8px		 Productive
Slider: 8px
20px (24px on hover, focus, active)
Emojis: 8px margin
:enabled Enabled ratings emotive theme light Enabled ratings emotive theme dark Enabled ratings productive horizontal theme light Enabled ratings productive horizontal theme dark
:hover Hover ratings emotive theme light Hover ratings emotive theme dark Hover ratings productive horizontal theme light Hover ratings productive horizontal theme dark
:focus Focus ratings emotive theme light Focus ratings emotive theme dark Focus ratings productive horizontal theme light Focus ratings productive horizontal theme dark
:active Active ratings emotive theme light Active ratings emotive theme dark Active ratings productive horizontal theme light Active ratings productive horizontal theme dark
Stars Stars ratings emotive theme light Stars ratings emotive theme dark  
Hearts hearts ratings emotive theme light hearts ratings emotive theme dark  
Emojis
Other ratings are 40%
with 16pt		 Emojis ratings emotive theme light Emojis ratings emotive theme dark  

Feedback

Users can give feedback from the options available using the element.

States Emotive
Selector: 72px
Text: 8px margin		 Productive horizontal
Slider height: 32px
Padding: 3px 17px
Option margin: 6px 		Productive vertical
Slider height: 32px
Padding: 17px 3px
Option margin: 3px
:enabled Enabled feedback emotive theme light Enabled feedback emotive theme dark Enabled feedback productive horizontal theme light Enabled feedback productive horizontal theme dark Enabled feedback productive vertical theme light Enabled feedback productive vertical theme dark
:hover Hover feedback emotive theme light Hover feedback emotive theme dark Hover feedback productive horizontal theme light Hover feedback productive horizontal theme dark Hover feedback productive vertical theme light Hover feedback productive vertical theme dark
:focus Focus feedback emotive theme light Focus feedback emotive theme dark Focus feedback productive horizontal theme light Focus feedback productive horizontal theme dark Focus feedback productive vertical theme light Focus feedback productive vertical theme dark
:selected Selected feedback emotive theme light Selected feedback emotive theme dark Selected feedback productive horizontal theme light Selected feedback productive horizontal theme dark Selected feedback productive vertical theme light Selected feedback productive vertical theme dark

Usage

Sliders are types of inputs that provide visual indication of adjustable content, where users can increase or decrase the value by moving the handle along the track.

Type Use
Slider One type of value available for user to slide to as an option
With label One type of value available for user to select, but has label above the slider to represent what the slider is for
With numbers One type of value available for user to select, but has number value on left and right side
With input One type of value available for user to select, has number value on left and right side and input value where users can manually enter the number

Ranges are types of inputs that allows users to select a minimum value to a maximum value

Type Use
Slider Two types of values from minimum to maximum for user to slide to as an option
With label Two types of values from minimum to maximum for user to select, but has label above the slider to represent what the slider is for
With numbers Two types of values from minimum to maximum for user to select, but has number value on left and right side
With input Two types of values from minimum to maximum for user to select, has number value on left and right side and input value where users can manually enter the number

Ratings allows users to give feedback on something being left being the lowest/worse and right being the highest and best. Use ratings when you want an average of data in regards to feedback from users.

Type Use
Emotive Non slider type of rating where users selects between options 1 to 5.
Productive Slider rating from left being lowest and right being highest, uses emojis to represent how the user feels.
Stars Star emoji ratings what users selects options 1 to 5.
Heart Heart emoji ratings what users selects options 1 to 5.
Emojis Multiple emoji ratings what users selects options.