Open UIOpen UI GitHub

Slider Parts & Part Concepts

This was created to begin to investigate the anatomy of the Slider/Range control. This was spurred on by this CSSWG Psuedo issue.

Legend:

  • True: part or concept exists
  • False: Part or concept does not exist
  • Depends: It does exist but it depends on certain functionality existing. This does not contribute to the total below but should be considered when reviewing the totals.
  • NA: This part or concept doesn't apply
  • Browser Parts: This component library leverages the currently available parts so reference the browser columns for support. These columns do not contribute to the total.

Part Concepts

These are general concepts that may exist for the Slider control. This does not attempt to show what the names should be called but the top utilized concepts should be prioritized for having a part defined.

ConceptAnt DesignCarbonUI FabricFASTLightningStardustWIA-ARIAMaterialAtlasKit-WebkitFirefoxTOTAL
ThumbTRUETRUETRUETRUETRUETRUETRUETRUETRUETRUETRUE11
TrackTRUETRUETRUETRUETRUETRUETRUETRUETRUETRUETRUE11
Filled Selected TrackTRUETRUETRUEFALSEFALSETRUENATRUEFALSETRUETRUE7
Content EndTRUETRUETRUEFALSETRUETRUENAFALSETRUEFALSEFALSE6
Content StartTRUETRUEFALSEFALSETRUETRUENAFALSETRUEFALSEFALSE5
Number OutputTRUETRUETRUEFALSEFALSETRUENAFALSEFALSEFALSEFALSE4
MarksTRUEFALSEFALSEFALSEFALSEFALSENAFALSEFALSETRUEFALSE2
StepTRUEFALSEFALSEFALSEFALSEFALSENATRUEFALSEFALSEFALSE2
TooltipTRUEFALSEFALSEFALSEFALSEFALSENATRUEFALSEFALSEFALSE2
Two HandlesTRUEFALSEFALSEFALSEFALSEFALSETRUEFALSEFALSEFALSEFALSE2
Mark ContentTRUEFALSEFALSEFALSEFALSEFALSENAFALSEFALSEFALSEFALSE1

Notes for some items:

  • Step: This does not reference if the step attribute is supported but that they provide a part/denotion to the UI of the steps for styling
  • Mark content: This denotes whether you can put content into the mark. This is already a standard by assinging a datalist to a range input. This is not fully supported by any browser.

Parts

These are names for the parts that may be used in a part concept.

PARTPART ConceptAnt DesignCarbonUI FabricFASTLightningStardustWIA-ARIAMaterialAtlasKit-WebkitFirefoxTOTAL
thumbThumbFALSETRUETRUETRUEBrowser PartsTRUETRUETRUEBrowser PartsTRUETRUE8
trackTrackDEPENDSTRUEFALSETRUEBrowser PartsDEPENDSNATRUEBrowser PartsTRUETRUE5
value-labelNumber OutputFALSEFALSETRUEFALSEBrowser PartsTRUENATRUEBrowser PartsFALSEFALSE3
railFilled Selected TrackTRUEFALSEFALSEFALSEBrowser PartsTRUENAFALSEBrowser PartsFALSEFALSE2
lineTrackFALSEFALSETRUEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
progressFilled Selected TrackFALSEFALSEFALSEFALSEFALSEFALSEFALSEFALSEFALSEFALSETRUE1
handle-oneTwo HandlesTRUEFALSEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
handle-twoTwo HandlesTRUEFALSEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
tickmarksMarksFALSEFALSEFALSEFALSEFALSEFALSEFALSEFALSEBrowser PartsTRUEFALSE1
markMarkskTRUEFALSEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
mark textMark ContentTRUEFALSEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
stepStepTRUEFALSEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
input-for-sliderNumber OutputFALSETRUEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1
input-numberNumber OutputTRUEFALSEFALSEFALSEBrowser PartsFALSENAFALSEBrowser PartsFALSEFALSE1