Slider Component

Slider Ticks

Slider ticks, provide a new and more attractive way for data visualization, like a particular timeframe, days of the week and more. With this new functionality the users are not obligated to interact with the slider in order to see what data stays behind. It is extremely flexible, in regards of the control over positioning and orientation of the ticks and tick labels. The ticks can be turned on/off, as well as pick between primary, secondary or both. Additionally this feature provides a way to turn on/of primary, secondary tick labels or both, they can even change their rotation form horizontal to vertical (top to bottom (90) or bottom to top (-90)).

Usage

Before we start, make sure that you have gone through the Ignite UI for Angular getting started section.

Once the set up is ready, the IgxSliderModule needs to be included in the app.module.ts file

// app.module.ts

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

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

Bottom Ticks

Let’s start with something simple and enable slider ticks below the slider and show every even number within a particular sequence.

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

<igx-slider id="slider" [maxValue]="50" [step]="10" [type]="type" [showTicks]="true" [primaryTicks]="6" [secondaryTicks]="4"></igx-slider>

// sample.component.ts 

// Change slider type initial value
public type = SliderType.RANGE;

Let’s look at the ticks below the slider. Firstly the whole feature is enabled by setting showTicks to true. Then setting primaryTicks to six (because the rendering starts from 0), defines and spreads all primary ticks equally below the slider. SecondaryTicks set up works a little bit different. It defines four secondary ticks between every two primary and if the calculation is right, 21 ticks will be rendered totally.

Disable secondary ticks and rotate primary ones.

In the next sample all secondary labels are disabled and all primary labels rotated.

<igx-slider
    [maxValue]="50"
    [continuous]="true"
    [type]="type"
    [showTicks]="true"
    [primaryTicks]="6"
    [secondaryTicks]="4"
    [secondaryTickLabels]="false"
    [tickLabelsOrientation]="labelsOrientation"
    [(ngModel)]="priceRange"></igx-slider>

Just to make it more interesting the value has been two-way data-bound to two inputs.

  <div class="wrapper">
      <igx-input-group>
          <input igxInput id="lowerPrice" type="text" [ngModel]="priceRange.lower | currency" />
          <label igxLabel for="lowerPrice">Lower price:</label>
      </igx-input-group>
      <igx-input-group>
          <input igxInput id="upperPrice" type="text" [ngModel]="priceRange.upper | currency" />
          <label igxLabel for="upperPrice">Upper price:</label>
      </igx-input-group>
  </div>

... {
public type = SliderType.RANGE:
public labelsOrientation = TickLabelsOrientation.BottomToTop;
public priceRange: PriceRange = new PriceRange(20, 40);
...
}

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

Following the example above, it is easy to determine that setting secondaryTickLabels to false disable all secondary tick labels, and passing BottomToTop(-90) property of TickLabelsOrientation enumeration to tickLabelsOrientation input does the rotation.

Disable primary ticks and change their orientation

Let’s move on and see how the orientation of the ticks is changed as well as their primary visibility.

<button igxButton="fab" igxRipple="white" (click)="decrease()">
    <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
</button>
<div class="slider-container">
    <igx-slider
        [maxValue]="20"
        [showTicks]="true"
        [secondaryTicks]="21"
        [secondaryTickLabels]="false"
        [ticksOrientation]="ticksOrientation"></igx-slider>
</div>
<button igxButton="fab" igxRipple="white" (click)="increase()">
    <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
</button>

The two buttons above are used just to control/update slider's value, but let's focus on the ticks manipulation.

  public ticksOrientation = TicksOrientation.Mirror;

The change of the orientation has come from ticksOrientation input, which was changed from Bottom(default) to Mirror. This mirrors the visualization of the ticks and duplicates them at the top as well.

Top ticks with visible labels

There is an edge case where thumb label is hidden intentionally, and it is when ticksOrientaion is set to Top or Mirror and there are any visible tick labels. This prevents a bad user experience and overlap between the two labels. To gain a better view over that scenario let’s see the example below.

<igx-slider
    [maxValue]="10"
    [showTicks]="true"
    [primaryTicks]="11"
    [ticksOrientation]="ticksOreintation"
></igx-slider>

public ticksOrientation = TicksOrientation.Top;

We haven’t done anything special here, except that we’ve changed the orientation of the ticks and positioned them at the top of the slider. We can see that, there isn’t any thumb label that is popping up.

Slider ticks with labels view

The feature has been aligned with the labels view feature as well. Let's see how.

<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 hasn't been set, because it won’t be reflected in any way. The length of the collection takes precedence and control over it. This does not mean that we are not able to set any secondaryTicks. We are, but all secondary ticks will be empty(without any labels), which makes them seem more as some sort of indicators between the primary ticks.

Template tick 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 gives as control 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;
  }

From the tackLabel callback above, we can see that every primary tick value has been rounded.

API References

###Additional Resources

Slider overview

Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)