Skip to main content

Slider Component

This document outlines the specifications for the SliderComponent, which is a customizable Angular component designed to allow users to select a value within a specified range by dragging a slider handle.

Purpose​

The SliderComponent serves as a user interface element for selecting a value from a range by dragging a slider handle along a track. It provides flexibility in customization and allows developers to integrate it into Angular applications seamlessly.

Usage​

Integrate the SliderComponent into your Angular applications to enable users to select a value within a range by interacting with the slider interface.

Inputs​

  1. minValue: (Required) Specifies the minimum value of the slider's range.

  2. maxValue: (Required) Specifies the maximum value of the slider's range.

  3. step: (Optional) Specifies the increment value when the slider handle is moved. Default value is 1.

  4. value: (Optional) Specifies the initial value of the slider. Defaults to the minValue.

  5. disabled: (Optional) Disables the slider if set to true.

  6. vertical: (Optional) Renders the slider vertically if set to true. Default is horizontal.

  7. tooltip: (Optional) Displays a tooltip with the current value when the slider handle is hovered if set to true.

  8. tooltipPlacement: (Optional) Specifies the position of the tooltip relative to the slider handle. Possible values:

    • 'top'
    • 'bottom'
    • 'left'
    • 'right'

  9. tooltipFormatter: (Optional) Allows customization of the tooltip's display format. Accepts a function that formats the value.

Example​

<app-slider
  [minValue]="0"
  [maxValue]="100"
  [step]="1"
  [value]="50"
  [disabled]="false"
  [vertical]="false"
  [tooltip]="true"
  tooltipPlacement="top"
  [tooltipFormatter]="formatTooltip"
>
</app-slider>

Notes​

  • Ensure that appropriate styling is applied to the slider component to match the overall design aesthetics of your application.
  • Implement the formatTooltip function to customize the tooltip's display format according to your application's requirements.
  • Provide clear visual indicators to guide users on how to interact with the slider component, especially for mobile and touch devices.