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.
<!DOCTYPE html><html><head><title>Slider Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="slider-container"><spanclass="slider-label">Slider</span><igc-slidervalue="40"></igc-slider></div><divclass="slider-container"><spanclass="slider-label">Range Slider</span><igc-range-sliderlower="20"upper="70"></igc-range-slider></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
<!DOCTYPE html><html><head><title>Slider Value</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-slidervalue="40"></igc-slider><divclass="value-container"><spanclass="slider-label">Value: </span><spanid="slider-value">40</span></div><igc-range-sliderlower="20"upper="70"></igc-range-slider><divclass="value-container"><spanclass="slider-label">Lower: </span><spanid="slider-lower">20</span><spanclass="slider-label">, Upper: </span><spanid="slider-upper">70</span></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Slider Disabled</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-slidervalue="40"disabled></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-slider {
padding: 30px30px0px30px;
}css
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.
<!DOCTYPE html><html><head><title>Slider Constraints</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-slidermax="1000"min="100"lower-bound="200"upper-bound="800"value="400"primary-ticks="2"
></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-slider {
padding: 30px30px0px30px;
}css
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.
<!DOCTYPE html><html><head><title>Slider Discrete Track</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-sliderstep="10"discrete-track></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-slider {
padding: 30px30px0px30px;
}css
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.
<!DOCTYPE html><html><head><title>Slider Tick Marks</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-sliderprimary-ticks="3"secondary-ticks="4"
></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-slider {
padding: 30px30px0px30px;
}css
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.
<!DOCTYPE html><html><head><title>Slider Tick Labels</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-sliderprimary-ticks="6"secondary-ticks="1"tick-orientation="mirror"tick-label-rotation="-90"hide-secondary-labels
></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-slider {
padding: 30px30px0px30px;
}css
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.
<!DOCTYPE html><html><head><title>Slider Value Format</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-sliderid="slider1"primary-ticks="3"secondary-ticks="4"
></igc-slider><igc-sliderid="slider2"value-format="Storage: {0} GB"
></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-slider {
padding: 30px50px;
}css
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.
<!DOCTYPE html><html><head><title>Slider Labels</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-sliderprimary-ticks="3"><igc-slider-label>Low</igc-slider-label><igc-slider-label>Medium</igc-slider-label><igc-slider-label>High</igc-slider-label></igc-slider></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Slider Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="slider-container"><spanclass="slider-label">Slider</span><igc-slidervalue="40"></igc-slider></div><divclass="slider-container"><spanclass="slider-label">Range Slider</span><igc-range-sliderlower="20"upper="70"></igc-range-slider></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css