Slider Overview and Configuration

    The Ignite UI for Angular Slider is a form component which allows selection in a given range by moving a thumb along a track. The track can be defined as continuous or stepped and the slider can be configured so users can choose between single value and range (lower and upper value) slider types.

    Angular Slider Example

    Usage

    Warning

    This component requires HammerModule to be imported in the root module of the application in order for user interactions to work as expected..

    To get started with the Slider component, you need to import the IgxSliderModule in to the app.module.ts file:

    // app.module.ts
    
    ...
    import { IgxSliderModule } from 'igniteui-angular';
    // import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxSliderModule],
        ...
    })
    export class AppModule {}
    

    Discrete Slider

    By default, the Slider Component is set to discrete type. A discrete slider provides a visualization of the current value with a numeric label (bubble). The bubble can be shown upon hovering on the slider thumb.
    You can also use the slider with predefined steps to track only meaningful values for the user.

    In the following example, we define a discrete slider that displays values from 0% to 100% and the step is set to 10% per increment/decrement.
    We also bind the slider value to a property in our component called "completion", using Angular ngModel, to allow two way binding with an input component.

    <!--sample.component.html-->
    
    <igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
    <igx-input-group type="border">
        <input igxInput id="percentInput" type="number" [(ngModel)]="task.completion" />
        <label igxLabel for="percentInput">Task Completion</label>
        <igx-suffix>%</igx-suffix>
    </igx-input-group>
    
    // sample.component.ts 
    import { Component, ViewChild } from '@angular/core';
    import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
    // import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-sample',
        styleUrls: ['./sample.component.scss'],
        templateUrl: './sample.component.html'
    })
    export class SampleComponent {
        public task = {
            completion: 10
        };
    
        constructor() { }
    }
    

    We should now see two-way data binding between our two components.

    Continuous Slider

    First, specify the slider type by setting the continuous input to true. Next, define the minimum and maximum values using minValue and maxValue.

    Note

    Continuous slider doesn't have step indicators over the track and visible thumb labels during interaction.

    <!--sample.component.html-->
    
    <igx-slider 
        id="slider" 
        [minValue]="0" 
        [maxValue]="100" 
        [continuous]=true 
        [(ngModel)]="volume">
        </igx-slider>
    <label igxLabel for="slider">Volume: {{volume}}</label>
    

    Lets also bind the slider value to a property in our component called "volume".

    // sample.component.ts 
    
    // Set an initial value
    public volume = 20;
    

    If the sample is configured properly, dragging the slider thumb should update the label below and the slider value should be limited between the specified minimum and maximum values:

    Range Slider

    First, set the slider type to RANGE. Next, we bind the slider value to an object with properties for lower and upper values.

    <!--sample.component.html-->
    
    <igx-slider 
        [type]="sliderType.RANGE" 
        [minValue]="0" 
        [maxValue]="1000" 
        [(lowerValue)]="priceRange.lower"
        [(upperValue)]="priceRange.upper">
    </igx-slider>
    
    <igx-input-group type="border">
        <label igxLabel for="lowerRange">From</label>
        <igx-prefix>$</igx-prefix>
        <input igxInput id="lowerRange" type="number" [(ngModel)]="priceRange.lower" />
    </igx-input-group>
    
    <igx-input-group type="border">
        <label igxLabel for="upperRange">To</label>
        <igx-prefix>$</igx-prefix>
        <input igxInput id="upperRange" type="number" [(ngModel)]="priceRange.upper" />
    </igx-input-group>
    
    // sample.component.ts
    import { Component } from '@angular/core';
    import { IgxSliderType } from 'igniteui-angular';
    // import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
      selector: 'app-sample',
      styleUrls: ['./sample.component.scss'],
      templateUrl: './sample.component.html'
    })
    export class SampleComponent {
      public sliderType = IgxSliderType;
      public priceRange = {
          lower: 200,
          upper: 800
      };
    
      constructor() { }
    }
    

    Note

    When using a slider of type RANGE, binding to ngModel will work only in the direction of updating the model from the slider. In order to use two-way binding for both values, you can take advantage of the lowerValue and upperValue bindings.

    In some cases, values near to the minimum and maximum are not appropriate. You can further provide a useful range to limit the user choice along with setting minValue and maxValue. This can be done by setting lowerBound and upperBound. Now, the user will not be able to move the thumb in the range of 0 to 100 and in the range of 900 to 1000.

    <!--sample.component.html-->
    
    <igx-slider 
        [type]="sliderType.RANGE" 
        [minValue]="0" 
        [maxValue]="1000"
        [(lowerValue)]="priceRange.lower"
        [(upperValue)]="priceRange.upper"
        [lowerBound]="100" 
        [upperBound]="900">
    </igx-slider>
    

    Labels mode

    We've seen only numbers in the thumbs so far, although there is another approach that you could use in order to present information - by using an array of primitive values.

    Note

    Your array of primitive values should contains at least two values, otherwise labelsView won't be enabled.

    Once we have the definition that corresponds to the preceding rule, we are ready to give it to the labels input property, which would handle our data by spreading it equally over the track. Now, label values represent every primitive value we've defined in our collection. They could be accessed at any time through the API by requesting either lowerLabel or upperLabel.

    Note

    Please take into account the fact that when labelsView is enabled, your control over the maxValue, minValue and step inputs will be taken.

    Another important factor is the way that the slider handles the update process when labelsView is enabled. It simply operates with the index(es) of the colleciton, which respectively means that the value, lowerBound and upperBound properties control the track by following/setting them (index(es)).

    <!--sample.component.html-->
    <igx-slider #slider3 [type]="sliderType" [labels]="labels" [lowerBound]="1" [upperBound]="5">
        <ng-template igxSliderThumbFrom let-value let-labels="labels">
            <span class="ellipsis">{{ labels[value.lower] }}</span>
        </ng-template>
        <ng-template igxSliderThumbTo let-value let-labels="labels">
            <span class="ellipsis">{{ labels[value.upper] }}</span>
        </ng-template>
    </igx-slider>
    
    // sample.component.ts
    public sliderType: SliderType = SliderType.RANGE;
    public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    

    As we see from the sample above, setting boundaries is still a valid operation. Addressing lowerBound and upperBound, limits the range you can slide through.

    Lables templating

    During the showcase above, we've intentionally shown how we can provide our custom label template, by using both igxSliderThumbFrom and igxSliderThumbTo directives. Intuitively we can assume that igxSliderThumbFrom corresponds to the lowerLabel and igxSliderThumbTo to the upperLabel.
    The context here gives us implicitly a reference to the value input property and explicitly a reference to the labels input if labelsView is enabled.

      <ng-template igxSliderThumbFrom let-value let-labels="labels">
        <span class="ellipsis">{{ labels[value.lower] }}</span>
      </ng-template>
      <ng-template igxSliderThumbTo let-value let-labels="labels">
          <span class="ellipsis">{{ labels[value.upper] }}</span>
      </ng-template>
    

    Slider Tick Marks & labels

    Slider tick marks, provide a new and more appealing way for data visualization, like a particular timeframe, days of the week and more. With this new functionality, the users are not obliged to interact with the Angular Slider in order to see what data range is being represented. It is extremely flexible, with regards to the control over positioning and orientation of the tick marks and tick labels. The ticks can be turned on/off, as well as can be toggled between primary, secondary or both. In addition, this feature provides a way to turn on/of primary, secondary tick labels or both. Tick labels can change their rotation form horizontal to vertical (top to bottom (90) or bottom to top (-90)).

    Enable ticks

    We can enable the ticks of the slider by setting the showTicks to true.
    Use primaryTicks to set the number of primary ticks.
    Use SecondaryTicks to set the number of secondary ticks.

    <!--sample.component.html-->
    
    <igx-slider 
        id="slider" 
        [maxValue]="100" 
        [step]="10"
        [showTicks]="true" 
        [primaryTicks]="3" 
        [secondaryTicks]="4">
    </igx-slider>
    
    // sample.component.ts 
    
    // Change slider type initial value
    public type = SliderType.RANGE;
    

    Labels orientation and visibility.

    In the following sample we disable all secondary labels by setting secondaryTickLabels to false.

    <igx-slider
        [step]="10"
        [type]="type"
        [maxValue]="100"
        [continuous]="true"
        [showTicks]="true"
        [primaryTicks]="3"
        [secondaryTicks]="4"
        [secondaryTickLabels]="false"
        [tickLabelsOrientation]="labelsOrientation">
    </igx-slider>
    

    We also rotate all viable labels by setting the TickLabelsOrientation to BottomToTop

    ```typescript
    ... 
    {
        public type = SliderType.RANGE:
        public labelsOrientation = TickLabelsOrientation.BottomToTop;
    }
    ...
    

    Ticks position

    Let’s move on and see how to change the position of the ticks.

    <div class="slider-container">
        <igx-slider
            [maxValue]="20"
            [showTicks]="true"
            [secondaryTicks]="21"
            [primaryTickLabels]="false"
            [ticksOrientation]="ticksOrientation">
        </igx-slider>
    </div>
    

    The position change has come from the ticksOrientation input, which is changed from Bottom(default) to Mirror. This mirrors the visualization of the ticks and displays them above and below the slider.

    
      // The available options are: Top, Bottom and Mirror
      public ticksOrientation = TicksOrientation.Mirror;
    

    Note

    When the ticksOrientaion is set to Top or Mirror and there are visible tick labels the thumb label is hidden intentionally. This prevents a bad user experience and overlapping between the two labels.

    Slider ticks with labels view

    This example show how the tick labels and the thumb label works together.

    <igx-slider
        [labels]="labels"
        [showTicks]="true"
        [secondaryTicks]="3"
    ></igx-slider>
    
      public type: SliderType = SliderType.RANGE;
      public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"];
    

    Here, the primaryTicks input has not been set, because it won’t be reflected in any way. The length of the collection takes precedence over it. This does not mean that secondaryTicks cannot be set. All secondary ticks will be empty (without any labels).

    Template labels

    Lastly, we will see how we can provide a custom template for the tick labels and what the template context provides.

    <igx-slider
        [showTicks]="true"
        [primaryTicks]="3"
        [secondaryTicks]="3">
        <ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
            {{ tickLabel(value, primary, idx) }}
        </ng-template>
    </igx-slider>
    

    Applying IgxTickLabelTemplateDirective to the ng-template assigns the template over all tick labels.

    Note

    The context executes per each tick.

    Which means that it provides a reference to:

    • each corresponding tick value
    • If that tick is primary.
    • tick index.
    • And the labels collection if we have such one.
      public tickLabel(value, primary, index) {
          if (primary) {
              return Math.round(value);
          }
    
          return value;
      }
    

    In the tickLabel callback above, we are rounding the value of every primary tick.

    Styling

    Lets change the default styles of our slider component by creating a new theme for it.

    Demo

    This is the final result from applying our new theme.

    Creating a component theme

    First we need to create a custom palette Now let's create our component theme and pass that custom palette to it.

    // In app-slider-styling.component.scss
    
    // Create slider theme.
    $custom-slider-theme: slider-theme(
        $track-color: #ff7400,
        $track-hover-color: #ff7400,
    
        $thumb-color: #ff7400,
    
        $base-track-color: #ddd,
        $base-track-hover-color: #ccc,
    
        $tick-label-color: #b246c2,
        $tick-label-color-tall: #ff7400,
    
        $tick-color: #b246c2,
        $tick-color-tall: #ff7400,
    );
    

    Applying the component theme

    Now to apply the component theme all that's left is to include css-vars mixin and pass the $custom-slider-theme map.

    // In app-slider-styling.component.scss
    
    // Pass our custom-slider-theme to `css-vars` mixin.
    // The `:host` here makes sure that all the theming will affect only this slider component.
    :host {
      @include css-vars($custom-slider-theme);
    }
    

    API References

    Our community is active and always welcoming to new ideas.