Lexicon
LexiconLexicon
v 2.0v 1.0
  • Get Started
  • Foundations
    • Animations
    • Color
    • Grid
    • Layout
      • Full Box
      • Cards Layout
      • Form Box
      • Sidebar + Box
    • Typography
    • Writing Style
  • Core Components
    • Actions Definition
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Charts
      • Colors
      • Interaction
      • Bar Chart
      • Donut Chart
      • Heatmap Chart
      • Line Chart
      • Pie Chart
      • Predictive Forecast Chart
      • Stacked Bar Chart
    • Confirmation Message
    • Dataset Display
    • Drag and Drop
    • Dropdown Menu
    • Empty States
    • Forms
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Forms Rules
      • Forms Validation
      • Checkbox, Radio, Toggle
      • Color Picker
      • Date & Time Pickers
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Slider
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumb
      • Navbar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bar
    • Sidebar
    • Stickers
    • Table
      • Table
      • Inline Edit Table
    • Tabs
    • Toolbars
      • Toolbar
      • Management Toolbar
      • Upper Toolbar
  • Satellite Components
    • File Upload
    • Image Selector
    • Miller Columns
    • Navigation
      • Navigation
      • Header
    • Sidebar
      • Info Panel
      • Product Menu
    • Sites
      • Sites
      • Asset Title Bar
      • Asset Toolbar
      • Buttons
      • Profile Info
      • Widget Title Bar
  • Templates
    • Dataset Template
    • Form Template
  • Examples
    • Asset Metrics Dashboard
    • Page Distribution
    • Partner Portal
  • News
    • News
    • Status
  • Resources

Slider

Pending
The Slider control allows user to select and entry data from among a linear range of values.

Usage

Sliders are used when you want the user to select a value from a predetermined range of values. A typical usage is selecting the contrast color value for an image.

States

Active

slider

Disabled

slider disabled

Variations

Slider

The standard slider contains no labels, but you can provide other references around it if you want. For example, the selected value can be perceived through an associated image. Example: A color contrast slider for an image.

slider

Slider with label

This variation supports a reference label that displays the slider head's value. This slider type is used when the range of values is easy to understand. Example: Color opacity range is always 0-100.

slider

Slider with references

A Slider with references is used when the range of values are not commonly known.

slider

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.