Range Slider

The Range Slider component is a user interface element that allows users to select a value from a continuous range of options. It consists of a horizontal bar with a draggable thumb that can be moved along the track to choose a specific value within the defined range.

Introduction

The range slider is a versatile and interactive component commonly used in web applications for various purposes. It offers an intuitive and user-friendly way to input a value within a given range. Whether it's selecting a price range, adjusting audio volume, or setting numeric preferences, the Range Slider provides a convenient and efficient method for users to make their selections.

Visual representation

The range slider is visually represented as a horizontal bar with a draggable slider thumb. Users can slide the thumb along the bar to select a value within the defined range. The selected value is displayed either next to the slider or inside the thumb for visual feedback.

<div class="aegov-form-control">
	<label for="rangelem">A range</label>
	<div class="form-control-input items-center">
		<input type="range" min="0" max="100" name="rangelem" id="rangelem" value="20" oninput="rangeelemoutput.innerHTML=value">
		<output class="w-[50px] text-sm text-end h-auto bg-transparent py-1" id="rangeelemoutput">
			20
		</output>
	</div>
</div>

Code structure

<div class="aegov-form-control">
	<label for="rangeSlider">A range</label>
	<div class="form-control-input items-center">
		<input type="range" min="0" max="100" name="rangeSlider" id="rangeSlider" value="20" oninput="rangeelemoutput.innerHTML=value">
		<output class="w-[50px] text-sm text-end h-auto bg-transparent py-1" id="rangeelemoutput">
			20
		</output>
	</div>
</div>

` min `: Specifies the minimum value of the range slider.
` max `: Specifies the maximum value of the range slider.
` name `: The "name" attribute defines the name of the input element. It is used when submitting forms.
` value `: Specifies the initial value of the range slider when the page loads.
` oninput `: "rangeelemoutput.innerHTML=value": This event attribute triggers a JavaScript function that updates the content of the output element ("rangeelemoutput") with the current value of the range slider as the user interacts with it.
The ` <output> ` element is used to display the current value of the range slider. It has specific styling classes to control its appearance.

With these attributes, the range slider component provides an interactive and functional way for users to select a value within the specified range.

Use of secondary colour

All form elements in the UAE Design System support the use of secondary colour.

Here is an example of the button element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.

<div class="aegov-form-control control-secondary">
	<label for="rangeSliderSeondary">A range</label>
	<div class="form-control-input items-center">
		<input type="range" min="0" max="100" name="rangeSliderSeondary" id="rangeSlider" value="20" oninput="rangeelemoutputSecondary.innerHTML=value">
		<output class="w-[50px] text-sm text-end h-auto bg-transparent py-1" id="rangeelemoutputSecondary">
			20
		</output>
	</div>
</div>

Behaviour

The Range Slider component is interactive and can be controlled by dragging the slider thumb or clicking/tapping on the desired value along the track. As the user adjusts the slider, the selected value is updated and displayed next to the slider, providing real-time feedback.

State

The ` disabled ` status is set via scripting.

Disabled state

By adding a ` disabled ` attribute to a range, you will essentially tell the browser that the range slider is unusable. Disabled state for a range slider would render it visually lighter. Add the ` aria-disabled="true" ` attribute to range which is disabled as well as an added measure for assistive technologies.

A range

Accessibility

The Range Slider component is designed with accessibility in mind to ensure all users can use it effectively. It includes proper semantic HTML elements, such as labels associated with form controls, using the "for" attribute. This association allows screen readers to identify the purpose of the slider.

Additionally, the Range Slider includes ARIA attributes to provide further context and accessibility information to assistive technologies. The visual design ensures sufficient color contrast and visible focus states to accommodate users with visual or motor impairments.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

نطاق

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Usage

Range sliders enhance user interfaces by enabling precise selection of numeric values, making them ideal for tasks like choosing price ranges in online shopping or setting preferences in audio volume control. Their intuitive, slider-based interaction simplifies complex numeric input.

Where to use a range slider?

Very useful when a single interaction can provide a visual cue towards selection of a value. A good example is a minimum price or number of days.
When you need the user to have the choice to selection values in a large iteration.
Within filters to show preference.
On user profile pages to allow settings preferences.

Radio

Select