Skip to main content
Version: Previous

Web Components - Slider

An implementation of a range slider as a form-connected Web Component. This component is used together with the alpha-slide-label. It displays a slider that the user can move in either direction to reset the value.

Set-up

import { provideDesignSystem, alphaSlider, alphaSliderLabel } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaSlider(), alphaSliderLabel());

Attributes

You can define the following attributes in an <alpha-slider>.

NameTypeDescription
disabledbooleanSimilar to readonly, but with a blur layer in the component
formstringAssociates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form
maxnumberDefines maximum number of the slider
minnumberDefines minimum number of the slider
stepnumberDefines the value of each step of the slider
readonlybooleanThe slider is for display only, and cannot be changed by the user
valuenumberDefines a value for the component when it is created
orientationstringDefines the orientation: vertical or horizontal

These attributes must be defined alongside the declaration of the component.

note

If you use the vertical orientation, the height of the component is defined as 160px as default. If you want to change it, go to your css and adjust the height of the component.

slide-label

You can use this component with an <alpha-slide-label>. This creates a label for the slider where you can display relevant values.

NameTypeDescription
positionnumberA position relative to min or max value to place the label

Usage

All examples below use the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

  • Example 1: a slider with min = 0 and max = 100 with value set as 70
Example 1
<alpha-slider min="0" max="100" value="70"></alpha-slider>
  • Example 2: a slider with min = 0 and max = 100 with 3 labels positioned at 0, 50 and 100 in steps of 5
Example 2
<alpha-slider min="0" max="100" step="5">
<alpha-slider-label position="0"> low </alpha-slider-label>
<alpha-slider-label position="50"> mid </alpha-slider-label>
<alpha-slider-label position="100"> high </alpha-slider-label>
</alpha-slider>
  • Example 3: a vertical slider
Example 3
<alpha-slider orientation="vertical"></alpha-slider>

Get the user input

Once the user has input a value to this component by moving the slider, there are two ways of retrieving the new value so that you can use it in the application:

  • as a number type, using valueAsNumber
  • as a string type using: valueTextFormatter

Both options work the same way:

  1. Create an @observable variable where you want to use this value. Remember to choose the right type.
import {... , observable} from '@genesislcap/web-core';
...
export class TEMPLATE extends GenesisElement {
...
@observable slider_value_number: number
@observable slider_value_string: string
...
}
  1. Use the sync function to insert the value from the component into the variable slider_value_number or slider_value_string:
import {sync} from '@genesislcap/foundation-utils';
...
...
<alpha-slider
min="0"
max="100"
valueAsNumber=${sync((x) => x.slider_value_number)}
valueTextFormatter=${sync((x) => x.slider_value_string)}></alpha-slider>
...
...

From this point, you can access the value of the component in your application.

Try yourself

Live Editor
<alpha-slider min="0" max="100" step="10" value="50">
    <alpha-slider-label position="0"> very low </alpha-slider-label>
    <alpha-slider-label position="30"> low </alpha-slider-label>
    <alpha-slider-label position="70"> high </alpha-slider-label>
    <alpha-slider-label position="100"> very high </alpha-slider-label>
</alpha-slider>
Result
Loading...

Use cases

  • Interact with data visualization
  • Input for numeric values
  • Dynamic filters

Additional resources