ngx-logarithmic-slider

Logarithmic slider. The steps of this slider are not linear but logarithmic...

installing the slider in existing cli project

cd your project and run the below command

npm install ngx-logarithmic-sider --save

open app.module.ts from src/app/ and add import

import { LogSliderLibraryModule } from 'ngx-logarithmic-slider';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LogSliderLibraryModule } from 'ngx-logarithmic-slider';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LogSliderLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit app.component.html (or edit a component where you meed to add the logarithmic slider)

<log-slider [(sliderValue)]="sliderValue" [(sliderMin)]="sliderMin" [(sliderMax)]="sliderMax" [inputStyle]="inputStyle" [sliderStyle]="sliderStyle"></log-slider>

Edit app.component.ts (or edit a component where you meed to add the logarithmic slider) and declare and set slider variables

  sliderValue = 1000;               // This is the initial value the input box and slider will assume
  sliderMin = 20;                   // Minimum limit for the slider. 
  sliderMax = 2000000;              // Maximum limit for the slider.
  inputStyle = { color: 'red'};     // ngStyle object for the input box - Unused in this version because of an Error NullInjectorError: No provider for KeyValueDiffers!
  sliderStyle = { cursor: 'ew-resize' };    // ngStyle object for the slider - Unused in this version because of an Error NullInjectorError: No provider for KeyValueDiffers!

git repository

git clone https://github.com/devendrap/ngx-logarithmic-slider.git
cd ngx-logarithmic-slider
npm install
ng serve