Introduction
The Value Slider is a Higher Order Component that extends slider functionality with customizable labels and images. Similar to the Label Slider, it differs by displaying only a single label that shows the current value and follows the slider's tick, rather than displaying a separate label for each tick position.
Component Structure
The Value Slider encapsulates the following components:
- Container (x1): Provides the background for the HoC
- Images (x3): Display images for each state
- Labels (x3): Display labels for each state
- Slider (x1): Handles user interaction
Properties
The Value Slider provides the following configurable properties:
States Configure the number of states for the HoC, with each state supporting:
- Up to 3 configurable images
- Up to 3 configurable labels
Current State Represents the active state of the HoC. This value can be modified to observe visual changes.
Slider Label
Similar to the Label Slider, the Value Slider features a Slider Label positioned adjacent to the slider. The label position is automatically calculated to align with the slider's current tick, making position configuration unavailable.
Configuration
By default, the Value Slider displays two images and a slider label. To display additional images and labels, right-click the HoC and select Edit to access the HoC editor for configuration modifications.
The Value Slider's appearance and settings are similar to the Label Slider.