Slider Component

Live Example

HTML Structure

The slider component uses the native HTML <input type="range"> element.

<div class="slider-container">
			<label for="volume-slider">Volume:</label>
			<input type="range" id="volume-slider" min="0" max="100" value="50">
			<span id="volume-value">50</span>
	</div>

Styling

Axiom01 provides base styling for the <input type="range"> element to ensure it looks consistent across browsers and themes. This includes styling the track and the thumb of the slider.

• The .slider-container can be used to group the label, slider, and value display.
• The <input type="range"> element itself is styled.
• The :disabled attribute will apply appropriate visual styles.

JavaScript Integration

To display the current value of the slider or to implement more complex interactions, you will need JavaScript.

<script>
			const volumeSlider = document.getElementById('volume-slider');
			const volumeValue = document.getElementById('volume-value');

			volumeSlider.addEventListener('input', (event) => {
					volumeValue.textContent = event.target.value;
			});
	</script>

Accessibility

The native <input type="range"> element is inherently accessible. Ensure you:

• Always associate the slider with a <label> using the for and id attributes.
• Provide clear min, max, and value attributes.
• If a visual display of the current value is not directly linked to the input, consider using aria-valuetext or aria-labelledby to provide additional context for screen readers.

Customization

Customize the appearance using Axiom01's CSS variables for colors (e.g., --a-color-primary for the thumb and filled track), spacing, and typography. You can also target the pseudo-elements (::-webkit-slider-thumb, ::-moz-range-thumb, etc.) for deeper styling control.