Documentation
  • ABLE - Design System
  • Structure
  • Themes
    • Styles
      • Ω Color Style
      • Ω Text Style
      • Ω Effect Style
      • Ω Size Dictionary
      • Ω Spacing Dictionary
      • Ω Motion Library
      • Ω Haptic Library
      • Ω Audio Library
      • Ω Time Dictionary
      • Ω Interaction Dictionary
    • Ω Icon Library
    • Ω Illustration Library
    • Ω Brand Library
  • Core
    • ε Elements
      • ε AdaptIcon
        • Θ AdaptIconBar
        • Ω AdaptIconShape
      • ε Avatar
        • Θ AvatarBar
        • Ω AvatarShape
      • Φ Badge
        • Θ Badge - Usecase
      • ε Button
        • Θ ButtonBar
      • Φ CheckboxCtrl
        • Ω CheckboxShape
      • ε Chip
        • ε ChipBar
        • Φ ChipModal
      • Φ Divider
      • ε FAB
        • Ω FABShape
      • ε Field
        • Θ FormFieldLabel
        • Θ FormFieldHelper
        • Θ FieldContainer
        • Θ FieldContent
        • Ω FieldShape
      • ε Graphic
        • ε Illustration (Canvas)
        • Θ GraphicBar
        • Θ Graphic - Status
        • ε Overlay
          • Φ OL - AdaptIcon
          • Φ OL - Avatar
          • Φ OL - Button
          • Φ OL - Icon
          • Φ OL - Sash
          • Φ OL - Stepper
          • Φ OL - Banner
          • Φ OL - Headline
      • Φ Icon
      • ε InputStepperCtrl
        • Φ InputStepperPieces
      • ε Label
      • ε ProgressCtrl
        • Φ ProgressBar
      • Φ RadioBtnCtrl
        • Ω RadioBtnShape
      • ε RatingCtrl
        • Φ RatePoint
        • Ω RatePointShape
      • ε SliderCtrl
        • Φ SliderBar
          • Ω SliderIndicator
          • Ω SliderKnob
          • Ω SliderTrack
          • Φ RulerTrack
            • Ω RulerTic
      • ε Snackbar
      • ε Paginator
        • Φ PagePoint
        • Ω PagePointShape
      • Φ SwitchCtrl
        • Ω SwitchShape
      • Φ Tab
        • Ω TabActive
      • ε ToggleCtrl
        • ε ToggleBar
        • Φ ToggleBtn
        • ε NavToggle
      • ε Tooltip
      • ε Caption
        • Θ Caption - Description
        • Θ Caption - Support
        • Θ Caption - Title
        • Θ CC - Leading
        • Θ CC - Primary
        • Θ CC - Trailing
    • Components
      • App Bar
        • Θ ABC - Leading
        • Θ ABC - Center
        • Θ ABC - Trailing
        • Θ ABC - Pieces
        • Θ AppBarExt
        • NavTab
      • Bullet
      • Button Panel
      • Content Bar
      • Form
        • Checkbox
        • ChipList
        • Input Stepper
        • Picker
          • PickView
        • Radio Button
        • Rate
        • SelectList
        • Slider
        • Switch
        • TextArea
        • Textfield
        • Toggle Button
        • UserList
        • FC - Leading
        • FC - Trailing
      • Headline
      • ListItem
        • Θ LIC - Leading
        • Θ LIC - Primary
        • Θ LIC - Trailing
      • Menu
        • Θ MC - Leading
        • Θ MC - Primary
        • Θ MC - Trailing
      • Modal
      • Paragraph
      • Section Header
      • Sheet
        • Sheet Drag
        • Sheet - Content
        • Sheet - Footer
      • Paginator Panel
      • TabBar
    • Ξ Modules
      • CardView
        • CardBar
        • CardItem
      • GridView
      • Hero
      • ListView
      • MasonryView
  • Actions
  • Contributing
    • Code of Conduct
Powered by GitBook
On this page
  • Properties
  • Shape
  • Size
  1. Core
  2. ε Elements
  3. ε SliderCtrl
  4. Φ SliderBar

Ω SliderKnob

PreviousΩ SliderIndicatorNextΩ SliderTrack

Last updated 9 months ago

Base: The base shape given to the grab knob of the slider. Here we define the different look and size of the knob.

  • Parent:

  • Sisters: , , ,

Properties

Shape

Circle: The default knob for the slider is a simple circle that can be drug to different locations along the track of the slider to set a value.

Box: A square with rounded corners

Triangle: A pointing triangle that could be used along with the tics (outside of the track).

Rectangle, Pill, Pentagon: Taller knobs to make the sliders grab area stand out a little more.

Size

For different slider sizes there's the need for different sizes of knob to proportionally align with the size of the slider track.

Styleguide Link
Slider Bar
Knob
Track
Indicator
Ruler Track