Articles Javascript

How to create an accessible slider component in Ember?

In this tutorial we will see how to create an accessible slider component in Ember based on the WAI-ARIA authoring practices.


1 How to create an accessible slider component in Ember?

In this tutorial we will see how to create an accessible slider component in Ember based on the WAI-ARIA authoring practices.

A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider.

1.1 Class diagram

Let us take a look at what are the different things that make up the Slider component in Ember


As you can see, most of the action takes place inside the Slider Thumb component, the Slider component is just a wrapper for the Slider Thumb.

1.2 Component Interface

Let us take a look at how the interface for the component looks like:


1.3 aria-slider -> template

This is how the markup / template for the aria-slider component will look like:

1.4 aria-slider -> component

Let us see how the bare bone structure of the aria-slider component in Ember:

We need to apply a classname aria-widget-slider to the component. Now the component should look like this:

Next, we need to set a class called focus when the focus is set for the component, and remove the same the focus is unset.

1.5 aria-slider-thumb -> component

Now we are going to concentrate on the Slider Thumb component.

We will start with a basic component skeleton in Ember.

Next we need to add the necessary classnames and attributes, by means of the classNameBindings and attributeBindings properties for a component in Ember.

Next we are going to create a computed property called ‘valueText’ which will give you the current value of the slider along with units.

Now we are going to concentrate on the keyDown event for the component where we will move the slider accordingly based on the keystroke by identifying the KEYCODES

First we need to define the keycode mappings using a constant.

Now the implementation of the keyDown event should like the following.

Let us add an handler for mouseDown event for the slider-thumb component.

Let us add the focusIn and focusOut action handlers also to the component.

Let us initialize the component. One thing we have to note here is that once the component is rendered on the page, we should move the thumb to the exact location based on the currentValue property set to the component. This is what we will be doing in the init function of the component.

Now let’s get to the meat of the component, the moveSliderTo method where we will be actually placing the slider-thumb in the exact location using css positioning.

As you can see we have used two constants called RAIL_WIDTH and THUMB_WIDTH, let’s define them at the top of the component file as global constants.

1.6 Source Code

The source code for this addon is hosted on Github

1.7 Demo

There is also a demo available for this addon here

Featured Image:

unsplash-logoAlexey Ruban