Git Product home page Git Product logo

ngx-slider's Introduction

ngx-slider-v2

NOTE: This fork was merged into the main repo. Please use @angular-slider/ngx-slider package instead!

Dependencies

ngx-slider Angular RxJS Actively supported
14.x 14.x 6.x No
15.x 15.x 7.x Yes
16.x 16.x 7.x Yes
17.x 17.x 7.x Yes

Note: Like with Angular only the latest 3 versions are actively supported.

Demos

Installation

To add the slider to your Angular project:

npm install --save @angular-slider/ngx-slider

Once installed, add the slider to your app.module.ts:

import { NgxSliderModule } from '@angular-slider/ngx-slider';

...

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

Sample usage

Now you can use the slider component in your app components, for example in app.component.ts:

import { Options } from '@angular-slider/ngx-slider';
...

@Component({...})
export class AppComponent {
  value: number = 100;
  options: Options = {
    floor: 0,
    ceil: 200
  };
}

And in template file app.component.html:

<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

Documentation

Full API documentation is available on official website.

Styling

An overview of how to apply your own style to the slider is described in STYLING.md.

Animations

As of v1.2.0 the slider features CSS animations of slider movement. If you prefer the previous behaviour, without animations, you can set the flag animate: false in your slider options.

Keyboard Shortcuts

In addition to mouse/touch events, the slider can also be controlled through keyboard. The available shortcuts are:

  • right/up arrow - increase by single step,
  • left/down arrow - decrease by single step,
  • page up - increase by 10% of slider range,
  • page down - decrease by 10% of slider range,
  • home - move to minimum value,
  • end - move to maximum value.

Tooltips

The slider allows for customising how to implement tooltips. See TOOLTIPS.md for more information.

Known Issues

Before reporting a new bug, please look at KNOWN_ISSUES.md for a list of known problems and their workarounds. New bugs reports for these problems will not be accepted.

Bugs

You can report any bugs as Github issues.

Please describe the issue in detail pasting any relevant code, or preferrably a StackBlitz with reproduction of the problem by forking and editing this sample StackBlitz. Please also provide the version of NPM package you are using.

Changelog

For list of changes and bugfixes, see CHANGELOG.md.

Developer information

If you would like to contribute to the project, see DEVELOPERS.md.

License

The project is licensed under the MIT license.

ngx-slider's People

Contributors

adrienhorgnies avatar angular-cli avatar artonio avatar bojankogoj avatar danisss9 avatar daosgc avatar dependabot[bot] avatar eulersson avatar jhinzmann avatar kfmorton avatar krikienoid avatar leximarie avatar michaelalt avatar nikdatsko avatar piotrdz avatar ratskrspr avatar richardpichler avatar rkristelijn avatar rp3e11 avatar shisho585 avatar valentinh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

ngx-slider's Issues

how to stay the slider pointer in the middle of two ticks

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?

Parent CSS scaling messes up the slider

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

dynamic disabling does not work with reactive forms

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.

Not compatible with Angular 16

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

Bad performance with huge ceil value

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>

UserChange event doesn't fire if the value exists multiple times on the slider

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.