Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Snapping Stepper

Read the complete tutorial here and checkout out the playground demo here.


Import SnappingStepperModule in the module you want to use it

// .module.ts
import { SnappingStepperModule } from './snapping-stepper/snapping-stepper.module';

Import StepperConfig interface to define the properties of the stepper and pass it to the snapping-stepper component as stepperConfig

// .component.ts
import { StepperConfig } from './snapping-stepper/stepper-config';

stepperConfig: StepperConfig = {
  width: 100,
  height: 100,
  limitLower: 0,
  limitHigher: 100,
  startingNum: 50,
  backgroundColor: '#dd00ff',
  textColor: '#000000'
<!-- .component.html -->
<app-snapping-stepper [stepperConfig]="stepperConfig" (valueChange)="onStepperValueChange($event)"></app-snapping-stepper>


Property Description Type Default
width Sets the width of the stepper number 150
height Sets the height of the stepper number 50
limitLower Sets the lower limit of the count number 0
limitHigher Sets the higher limit of the count number 100
startingNum Sets the initial value of the count number 50
backgroundColor Sets the background color of the stepper string '#1976d2'
textColor Sets the text color of the positive and negative buttons string '#ffffff'
focusBackgroundColor Sets the background color of the middle section containing the count string '#2196f3'
focusTextColor Sets the text color of the count string '#ffffff''
(valueChange) Emits the current count number
You can’t perform that action at this time.