emirkartal0/ngx-slider-button

customizable slide to confirm button lib for angular

ngx-slider-button

An Angular component that provides a "Slide to Confirm" functionality, typically used for actions that require user verification.

Installation

Install the package using npm:

npm i ngx-slider-button

Inputs

Input	Type	Description	Default Value
thumbColor	string	Specifies the color of the thumb in hex format.	"#3b82f6"
trackColor	string	Specifies the color of the track in hex format.	"#fff"
placeholderText	string	The text displayed as the placeholder initially.	"Slide to confirm"
secondaryPlaceholderText	string	The text displayed as the placeholder while sliding.	"Confirming"
placeholderColor	string	The color of the placeholder text.	"#fff"
src	string	The character or symbol displayed on the thumb.	">"
checkDisable	boolean	Controls the disabled state of the component.	false

Output

successEvent();

Event emitted when the sliding action is successfully completed.

Example

Here is a complete example of how to use the ngx-slider-button component in an Angular application:

import { Component } from "@angular/core";
import { NgxSliderButtonComponent } from "ngx-slider-button";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgxSliderButtonComponent],
  template: `
    <div style="width: 50%;">
      <ngx-slider-button 
        [placeholderText]="'Swipe to unlock'" 
        [secondaryPlaceholderText]="'Unlocking...'" 
        (successEvent)="onSuccess()"
      >
      </ngx-slider-button>
    </div>
  `,
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onSuccess() {
    console.log("Slide to confirm completed!");
  }
}