Web Components Slider & Range Slider Overview

    The Web Components Slider & Range Slider components allow 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.

    Web Components Slider & Range Slider Example

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents

    Before using the IgcSliderComponent and IgcRangeSliderComponent, you need to register them as follows:

    import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcSliderComponent and IgcRangeSliderComponent is as follows:

    <igc-slider value="40"></igc-slider>
<igc-range-slider lower="20" upper="70"></igc-range-slider>

    Value

    The main difference between the Slider and Range Slider components is that the Slider component has a single thumb, while the Range Slider component has two thumbs. The single thumb of the Slider component displays its value property. The two thumbs of the Range Slider component display its lower and upper value properties.

    Both sliders emit two events when any of the values is changed. The IgcInputComponent event is emitted whenever a value is changed using keyboard or drag interaction while the igcChange event is emitted when the value change is committed on drag end or keyboard interaction.

    While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the hideTooltip property.

    Disabled

    You can use the disabled property of the sliders to disable their user interactions.

    Constraints

    The track of the sliders has a minimum and maximum values which are configured using the min and max properties. Additionally, you can restrict the thumb dragging using the lowerBound and upperBound properties.

    Step

    The step property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the discreteTrack property of the slider to true will make it to display the steps on the track.

    If the step property is set to 0, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if discreteTrack is set to true.

    Tick Marks

    The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the primaryTicks property to a value greater than 1. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the secondaryTicks property to a value greater than 0. The value of secondaryTicks specifies the number of secondary ticks between every two primary ticks.

    Additionally, you could configure the orientation of the tick marks using the tickOrientation property. By default, the tickOrientation value is end which displays the ticks below the slider track. You could set it to start which displays them above the track and mirror which mirrors the ticks above and below the track.

    By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the tickLabelRotation property. Additionally, you could hide the labels of the primary and secondary ticks using the hidePrimaryLabels and hideSecondaryLabels properties.

    Value Format

    If you want to format the thumb and tick label values, the slider provides valueFormat, valueFormatOptions and locale properties. Тhe valueFormatOptions allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified locale. The valueFormat is a string which may contain the {0} identifier which will be replaced by the value with applied format options.

    Labels

    In some cases you would want to format the values of the slider as string values i.e. map the values [0, 1, 2] to ['Low', 'Medium', 'High']. For this scenario the slider allows you to define IgcSliderLabelComponent elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the min, max and step properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, min is set to 0, max is set to 2 and step is set to 1.

    Styling

    The slider components expose CSS parts for their inner elements. The following table lists all CSS parts:

    Name Description
    base The base wrapper of the slider.
    ticks The ticks container.
    tick-group The tick group container.
    tick The tick element.
    tick-label The tick label element.
    tick-label-inner The inner element of the tick label.
    thumbs The thumbs container.
    thumb The thumb element.
    thumb-label The label container of the thumb tooltip.
    thumb-label-inner The label element of the thumb tooltip.
    track The track container.
    steps The track steps element.
    inactive The inactive element of the track.
    fill The filled part of the track.

    The following sample demonstrates how to style the track fill and thumb parts:

    API References

    Additional Resources