Example Wiki

Class: Range

Description: The Range component renders a slider that allows the user to select a value within a specified range. It uses the rc-slider library for slider functionality.

Methods

Method: Range

Description: The Range component renders a slider with a specified initial value, range, and onChange handler.

Parameters:

• initial (number): The initial value of the slider.
• range (number[]): An array of two numbers representing the minimum and maximum values of the range.
• onChange ((value: number) => void): A callback function that is called when the slider value changes.
  • The function receives the new slider value as an argument.
• className (string): An optional string representing the CSS class name to be applied to the slider element.
• ...props (any): Any other props to be passed to the Slider component.

Returns:

• JSX.Element: The rendered Slider component.

Example:

import Range from './Range';

<Range 
  initial={50}
  range={[0, 100]}
  onChange={(value) => console.log(`Slider value changed to ${value}`)}
  className="custom-slider"
/>