Slider

Slider

Overview

The Slider component is a custom React component designed to create a draggable slider for adjusting values within a specified range. It's ideal for settings requiring user input for value adjustments, like volume controls or progress bars. The component includes audio feedback for interactions and supports custom styling.

Installation

To use the Slider component in your React application, import it as follows:

const { Slider } = window.$_gooee.framework;

Usage

The Slider component is used to display a draggable slider, allowing users to select or adjust a value within a range. It supports custom styling and provides an audio feedback feature for interactions.

Props

The Slider component accepts the following props:

• className: Additional CSS class names to apply to the slider.
• value: The initial value of the slider.
• onValueChanged: Function to be called when the slider value changes. It receives the new value as an argument.
• style: CSS styles to apply to the slider.

Functionalities

• Draggable Slider: Allows users to adjust the value by dragging the slider.
• State Management: Manages its value state internally and syncs with the value prop.
• Custom Styling: Can be styled via CSS classes and inline styles.
• Audio Feedback: Provides audio feedback for interactions using the engine.trigger method.

Styling

The component uses the form-slider class as its base, which can be extended or overridden with additional classes passed through the className prop. The form-slider-grip class is used for the draggable part of the slider.

Interaction

• The slider's value changes upon dragging the grip.
• Audio feedback is played on grab, drag, and release events.

Examples

Basic Slider

<Slider
    value={50}
    onValueChanged={(newValue) => console.log(newValue)}
/>

Custom Styled Slider

<Slider
    className="slider-danger"
    value={30}
    onValueChanged={(newValue) => console.log(newValue)}
/>

Contributing

Contributions to improve the Slider component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.