Slider

The Ignite UI for Angular 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.

Slider Demo

Note

To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.

Usage

To get started with the Ignite UI for Angular Slider, let's first import the IgxSliderModule in our app.module.ts file:

// app.module.ts

...
import { IgxSliderModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxSliderModule],
    ...
})
export class AppModule {}

Continuous Slider

Warning

isContinuous property has been deprecated, continuous should be used instead.

Let's start with a simple 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. We also bind the slider value to a property in our component called "volume".

Note

Continuous slider does not display ticks and bubble label for the current value.

<!--sample.component.html-->

<igx-slider id="slider" [minValue]="0" [maxValue]="100" [continuous]=true [(ngModel)]="volume" ></igx-slider>
<label igxLabel for="slider">Volume: {{volume}}</label>
// 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:

Discrete Slider

By default, the Ignite UI for Angular Slider is discrete. Discrete slider provides visualization of the current value with a numeric label (bubble).

You can use a discrete slider with predefined steps to track only meaningful values for the user. For example, the discrete slider can visualize rating from 0 to 5 or completion percentage from 0% to 100%.

In the following example, we define a discrete slider that displays values from 0% to 100%. The step is set to 10. We also bind the slider value to a property in our component called "completion" 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>
<div class="igx-form-group">
    <input igxInput id="percentInput" type="text" [value]="task.completion / 100 | percent" (blur)="updateTask($event.target)" />
    <label igxLabel for="percentInput">Task Completion</label>
</div>
// sample.component.ts 

public task: Task = new Task(10);

updateTask(event) {
    if (!isNaN(parseInt(event.value, 10))) {
        this.task.completion = event.value;
    } else {
        event.value = this.task.completion;
    }
}

...

class Task {
  constructor (
      public completion: number
  ) {
  }
}

If the sample is configured properly, dragging the slider thumb should update the input value and modifying the input value should update the slider value.

Range Slider

To visualize a range filter for example, use a range slider. To achieve this, set the slider type to RANGE. Next, we bind the slider value to an object of type PriceRange. That object has two properties for lower and upper range values.

<!--sample.component.html-->

<igx-slider [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(ngModel)]="priceRange"></igx-slider>
// sample.component.ts

public sliderType = SliderType;
public priceRange: PriceRange = new PriceRange(200, 800);

...

class PriceRange {
  constructor(
    public lower: number,
    public upper: number,
  ) {
  }
}

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" [(ngModel)]="priceRange" [lowerBound]="100" [upperBound]="900" ></igx-slider>

Let's add two inputs in addition and bind them to the lower and upper range slider values. Thus, we can visualize and modify current slider values.

<!--sample.component.html-->

<div class="wrapper">
    <div class="igx-form-group">
        <input igxInput id="lowerInput" type="text" [ngModel]="priceRange.lower | currency" (blur)="updatePriceRange($event.target)" />
        <label igxLabel for="lowerInput">Lower price:</label>
    </div>
    <div class="igx-form-group">
        <input igxInput id="upperInput" type="text" [ngModel]="priceRange.upper | currency" (blur)="updatePriceRange($event.target)" />
        <label igxLabel for="upperInput">Upper price:</label>
    </div>
</div>
// sample.component.ts

public updatePriceRange(event) {
    const prevPriceRange = this.priceRange;
    switch (event.id) {
      case "lowerInput": {
        if (!isNaN(parseInt(event.value, 10))) {
          this.priceRange = new PriceRange(event.value, prevPriceRange.upper);
        }
        break;
      }
      case "upperInput": {
        if (!isNaN(parseInt(event.value, 10))) {
          this.priceRange = new PriceRange(prevPriceRange.lower, event.value);
        }
        break;
      }
    }
}

If the sample is configured properly, the final result should look like that:

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>

API References

Additional Resources

Our community is active and always welcoming to new ideas.