danisss9 / ngx-slider Goto Github PK

Add support for Angular 17+

import { Options as SliderOptions } from 'ngx-slider-v2';
Here are my options:

sliderOptions: SliderOptions = { 
    floor: 0,
    ceil: 100,
    showSelectionBar: true,
    hidePointerLabels: true,
    hideLimitLabels: true,
    disabled: false
  };

html
<ngx-slider [options]="sliderOptions" formControlName="rxvolume"></ngx-slider>

dynamically disable/enable

disableEnableFields(disabled: boolean) {
    this.sliderOptions = Object.assign({}, this.sliderOptions, {disabled: disabled});
    disabled ? this.form.disable() : this.form.enable();
  }

This works if I don't have the formControlName on the directive. With the formControlName, it adds the [disabled]='disabled' to the DOM, and the classes show up, but I can still move the slider. The same goes in reverse. If I start with the slider options set to disabled: true. it IS disabled and I cannot move the slider, and dynamically setting disabled to false does not allow me to move the slider. Again, this only seems to be the case when I'm using formControlName. If I don't, it disables/enables the slider dynamically without issue.

Edit: This also seems to be affected because of enabling, disabling the form dynamically. When this line
disabled ? this.form.disable() : this.form.enable();
is removed, the slider enables/disables as it should.

Hi, I have a slider that contains (possibly duplicate) timestamps. Whenever I change from a tick on the slider to another one with the same timestamp, I expect the UserChange event to be emitted but this doesn't seem to be the case. In all the other cases (when the timestamps differ) the event is correctly emitted.

Is there any known workaround or is it planned to fix that?

Bug
A bug I stumbled into is that the slider breaks (displays wrong) if the ngx-slider element or any of it's parents contain a CSS scaling transform rule (Eg : transform : scale(N) ; ).

Steps to replicate:

1. Create a parent to contain your slider and set the CSS rule transform:scale(2);.
2. Add an ngx-slider as a child to that parent.
3. Load the page and attempt to slide the slider.

Reproduction: https://codesandbox.io/s/cool-darkness-tkbp0k?file=/src/app/app.component.html

Update @ng-bootstrap/ng-bootstrap to 16.0.0 instead ^16.0.0-rc.1

Angular version: 15.1.2
ngx-slider-v2: ^16.0.2

It works properly but still got the error and the application won't build

is there a way to free slide when tick enable please? so with tick enabled right now the slider is forced to move towards the tick and stops only on a predefined tick, it seems no possible stay the slider pointer in the middle of two ticks?

Hey there! Thanks a lot for forking the project. 🚀

We use the slider in our application to let the user select one of 86400 seconds and with ceil values that large, the browser needs to work for a long time before it displays the page. It used to work with the original implementation.

Repro:
<ngx-slider [options]="{ ceil: 86400 }"></ngx-slider>

I wanted to switch from angular-slider/ngx-slider to this fork, but unfortunately it seems not compatible with Angular 16: I get an error when trying to do an npm install:

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^15.0.4" from [email protected]
npm ERR! node_modules/ngx-slider-v2
npm ERR!   ngx-slider-v2@"*" from the root project