ang-connecting-slider

connecting-slider

This library was generated with Angular CLI version 13.3.0. It is an ultra-modern pure JavaScript based slider with MVC architecture. This is multiple connecting sliders. This package helps to create n numbers of the connected sliders with a total sum value of 100%. The purpose is to assign different weightage to the slider with respect to each other.

Install package

Run npm i ang-connecting-slider@latest to install the latest version of ang-connecting-slider.

Import library in the module

import { ConnectingSliderModule } from 'ang-connecting-slider';

imports: [
    ..., ConnectingSliderModule, BrowserModule
  ],

Import selector in the component

<Connecting-Slider [contents]="contents" [config]="config">
</Connecting-Slider>

Configuration

Pass an array of objects with the following configuration. Every object should have a unique _id and the sum of the split percent should be 100.

 contents = [
      { _id: 1, name: 'Slider 1', split_percent: 25 },
      { _id: 2, name: 'Slider 2', split_percent: 25 },
      { _id: 3, name: 'Slider 3', split_percent: 25 },
      { _id: 4, name: 'Slider 4', split_percent: 25 },
    ];

To change the slider UI initialize config in the component as shown below.

config = {
      "sliderColor": "#3E9ADC",
      "textColor": "#020534",
      "textFont": "normal",
      "textFontWeight": 200,
      "textFontSize": "16px",
    }

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.