mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
112 lines
4.2 KiB
YAML
112 lines
4.2 KiB
YAML
name: "Slider"
|
|
description: "An input control that allows users to select a numeric value from a range by dragging a handle along a track, providing visual feedback for value selection."
|
|
category: "Input"
|
|
slds_classes:
|
|
root: "slds-slider"
|
|
elements:
|
|
- class: "slds-slider__range"
|
|
description: "The slider track element"
|
|
purpose: "Visual track that shows the selectable range"
|
|
modifiers:
|
|
- class: "slds-slider_vertical"
|
|
description: "Vertical slider orientation"
|
|
usage: "When vertical layout is preferred or required"
|
|
states:
|
|
- class: "slds-has-error"
|
|
description: "Error state styling"
|
|
trigger: "When slider validation fails"
|
|
- class: "slds-is-disabled"
|
|
description: "Disabled state styling"
|
|
trigger: "When slider is not interactive"
|
|
variants:
|
|
- name: "Base"
|
|
description: "Standard horizontal slider"
|
|
classes:
|
|
- "slds-slider"
|
|
usage_context: "Default slider implementation for numeric range selection"
|
|
differences: "Horizontal slider with draggable handle on track"
|
|
lightning_component:
|
|
name: "lightning-slider"
|
|
url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-slider"
|
|
mapping_notes: "Direct mapping - Lightning component implements SLDS slider blueprint"
|
|
accessibility:
|
|
keyboard_support:
|
|
- "Tab to focus the slider"
|
|
- "Arrow keys to adjust value in increments"
|
|
- "Page Up/Page Down for larger increments"
|
|
- "Home/End to go to minimum/maximum values"
|
|
screen_reader:
|
|
- "Current value announced when changed"
|
|
- "Range minimum and maximum communicated"
|
|
- "Step increment information provided"
|
|
- "Label and purpose announced"
|
|
aria_attributes:
|
|
- "role='slider' for the input element"
|
|
- "aria-valuenow for current value"
|
|
- "aria-valuemin for minimum value"
|
|
- "aria-valuemax for maximum value"
|
|
- "aria-label describing the slider purpose"
|
|
- "aria-describedby for additional instructions"
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- "For selecting numeric values from a continuous range"
|
|
- "When visual feedback of value position is helpful"
|
|
- "For settings or configuration values"
|
|
- "When precise value selection with constraints is needed"
|
|
when_not_to_use:
|
|
- "For discrete value selection (use select or radio instead)"
|
|
- "When exact precision is critical (use numeric input)"
|
|
- "For very large ranges where slider becomes impractical"
|
|
best_practices:
|
|
- "Provide clear labels for minimum and maximum values"
|
|
- "Use appropriate step increments for the use case"
|
|
- "Show current value clearly"
|
|
- "Ensure adequate touch target size for mobile"
|
|
- "Provide keyboard accessibility"
|
|
common_mistakes:
|
|
- "Making slider too small for precise interaction"
|
|
- "Using inappropriate step sizes"
|
|
- "Not showing current value"
|
|
- "Poor keyboard navigation implementation"
|
|
code_examples:
|
|
- title: "Basic Slider"
|
|
code: |
|
|
<div class="slds-form-element">
|
|
<label class="slds-form-element__label" for="slider-id-01">Slider Label</label>
|
|
<div class="slds-form-element__control">
|
|
<div class="slds-slider">
|
|
<input type="range" id="slider-id-01" class="slds-slider__range" value="50" min="0" max="100" step="1" />
|
|
<span class="slds-slider__value" aria-hidden="true">50</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
styling_hooks:
|
|
- name: "--slds-c-slider-track-color-background"
|
|
description: "Background color for slider track"
|
|
category: "color"
|
|
dependencies:
|
|
css_files:
|
|
- "slider.css"
|
|
- "form-element.css"
|
|
javascript: []
|
|
icons: []
|
|
other_components:
|
|
- "form-element"
|
|
related_components:
|
|
- name: "Input"
|
|
relationship: "alternative"
|
|
description: "Alternative for precise numeric input"
|
|
- name: "Progress Bar"
|
|
relationship: "similar"
|
|
description: "Similar visual concept for showing values"
|
|
- name: "Range Input"
|
|
relationship: "variant"
|
|
description: "Dual-handle slider for range selection"
|
|
references:
|
|
official_docs: "https://v1.lightningdesignsystem.com/components/slider/"
|
|
metadata:
|
|
version: "1.0.0"
|
|
last_updated: "2025-11-12"
|
|
review_status: "complete"
|
|
notes: " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
|