'Implement Angular range slider using months

I'm implementing a range slider by months using ngx-slider.

I want the value to be 1-12 and the display legend to be January-December.

I achieve it using the code below.

export class AppComponent {
  minValue: number = 3;
  maxValue: number = 9;
  options: Options = {
    floor: 1,
    ceil: 12,
    translate: (value: number, label: LabelType): string => {
      switch (label) {
        case LabelType.Low:
          return "<b>March</b>";
        case LabelType.High:
          return "<b>October</b>";
        default:
          return "$" + value;
      }
    }
  };
}

And the result is this one: Link to the image result

How can I remove the dollar sign of the start and end value?

Or do you have better recommendation npm library for range slider for months?

htmlcssangularslider


Solution 1:[1]

Hello this time slider I used in the project https://refreshless.com/nouislider/examples/ You can change the style using CSS, Hope it can be adopted.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vueAng

Related Questions