@nahuelmorata/ngx-bootstrap-slider

ngx-bootstrap-slider

It is a fork of the repository to keep angular updated

This is an Angular component for the popular and very flexible seiyria/bootstrap-slider (https://github.com/seiyria/bootstrap-slider).

Some demos are available here: https://seiyria.com/bootstrap-slider/

Versions

Version	Angular Version
v2.x.x	v12.x.x
v3.x.x	v13.x.x
v4.x.x	v14.x.x
v5.x.x	v15.x.x
v6.x.x	v16.x.x

Install

npm install ngx-bootstrap-slider

Setup

Include the module

Import the module in your app.module.ts:

import { NgxBootstrapSliderModule } from '@nahuelmorata/ngx-bootstrap-slider';

Add the module to the imports in your app.module.ts:

imports: [
  ...
  NgxBootstrapSliderModule,
  ...
]

Configure the Angular CLI

Add the CSS and JavaScript files to your angular.json:

"styles": [
  "node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
],
"scripts": [
  "node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
]

Getting started

Add a slider element to your component:

<mv-slider [(value)]="value" [min]="1" [max]="100" [enabled]="enabled" (change)="change()"></mv-slider>

Attributes

All available properties are described here: https://github.com/seiyria/bootstrap-slider#options

The names have been unified to camel-casing (e.g. [ticksLabels] not [ticks_labels]).

Events

All available events are described here: https://github.com/seiyria/bootstrap-slider#events

Currently, only the following events are implemented:

• slide
• slideStart
• slideStop
• change