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

``bash npm install ngx-logarithmic-sider --save`

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


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

`typescript 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)`

`html`

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

`typescript 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`

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

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

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

typescript
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.ts (or edit a component where you meed to add the logarithmic slider) and declare and set slider variables

typescript
  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!