Slider Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Assumptions and Limitations
6. References

Objectives

The Slider component allows selection in a given range by moving the thumb along the track. The track can be defined as continuous or stepped and you can choose between SINGLE and RANGE slider types.

2. User Stories

Developer:

As a developer I would like to:

• be able to provide an array of strings that the slider could spread and visualize as labels of the thumbs.

<igx-slider [stepLabels]="['spring', 'autumn', 'winter', 'summer']">
</igx-slider>

• be able to change the type of the slider as a single or range.

<igx-slider [stepLabels]="['spring', 'autumn', 'winter', 'summer']" [type]="sliderType">
</igx-slider>

• be able to track the changes of the values per every slide.
• have the ability to manipulate the slider values through two way data binding.
• have a continuous and discontinued(stepped) representation of the slider.

<igx-slider [isContinuous]="true">
</igx-slider>

• be able to set a minimum and maximum values representing the beginning and end of a number sequence.

[begin....end]

<igx-slider [minValue]="20" [maxValue]="80">
</igx-slider>

• have the ability to set boundaries, limiting the sliding range in a given sequence of numbers.

[begin..lowerBound.......upperBound...end]

<igx-slider [lowerBound]="30" [upperBound]="70">
</igx-slider>

• be able to prevent user from interacting with the slider through the UI.
• have the ability the set the visibility duration of the thumb label that shows the slider value.
• have the ability to manipulate the sliding step.
• be able to manipulate the positioning of the slider pins(thumbs) through the API.

End user:

As end user I would like to:

• be able to pass an array of values represented by the thumbs of the slider.
• be able to navigate through the slider by dragging the pins.
• be able to change the positioning of the pins through the API.

Acceptance criteria

1. Have a slider that represents a sequence of numbers [1...n]
2. Have a slider that allows smooth navigation with mouse drag.
3. Have the ability to put boundaries for sliding and rendering.
4. Have a slider that shows the values we are navigating through.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End User Experience

3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. User Interface

Include a diagram linking the elements with the visual representation of the feature

3.5. Navigation

3.6. API

Enums

SliderType

Name	Description
SLIDER	Slider with single thumb.
RANGE	Range slider with multiple thumbs, that can mark the range.

Interfaces

IRangeSliderValue

Name	Type	Description
lower	number	The lower value of the range slider
upper	number	The upper value of the range slider

ISliderValueChangeEventArgs

Name	Type	Description
oldValue	number | string | IRangeSliderValue | IRangeSliderValueLabel	Previous value of the slider
new	number | string | IRangeSliderValue | IRangeSliderValueLabel	Current value of the slider

Inputs

Name	Description	Type	Default value
id	Unique identifier of the component. If not provided it will be automatically generated.	string	igx-slider-0
disabled	Disables or enables UI interaction.	boolean	false
isContinuous	Marks slider as continuous. By default is considered that the slider is discrete. Discrete slider does not have ticks and does not shows bubble labels for values.	boolean	false
lowerBound	The lower boundary of the slider value. If not set is the same as min value.	number	0
upperBound	The lower boundary of the slider value. If not set is the same as max value.	number	100
minValue	The minimum value for the slider.	number	0
maxValue	The maximal value for the slider.	number	100
step	The incremental/decremental step of the value when dragging the thumb. The step should be greater than 0.	number	1
thumbLabelVisibilityDuration	The duration visibility of thumbs labels.	number	750 ms
type	Sets the SliderType, which is SLIDER or RANGE.	SliderType	SLIDER
value	The slider value. If the slider is of type SLIDER the argument is number. By default if no value is set the default value is same as lower upper bound. If the slider type is RANGE then the argument is object containing lower and upper properties for the values. By default if no value is set the default value is for lower value it is the same as lower bound and if no value is set for the upper value it is the same as the upper bound.	number|IRangeSliderValue

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters
onValueChange	This event is emitted when user has stopped interacting with the thumb and value is changed.	no	ISliderValueChangeEventArgs

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions	Limitation Notes

6. References

Specify all referenced external sources