Skip to main content

Value Slider

Introduction​

Value Slider is a slider alike Higher Order Component, providing a way to customize the slider labels and images, pretty similar with Label Slider, only that there's only one label (shows the value) following the slider's tick, instead of one label for each tick.

Value Slider has the following wrapped widgets:

  • Container (x1): provides the background of the HoC
  • Images (x3): provide images for the states
  • Labels (x3): provide labels for the states
  • Slider (x1): provides interactive behavior

Value Slider has the following properties:

  • States

    Config how many states the HoC has, and each state has:

    • 3 configurable images at max
    • 3 configurable labels at max

  • Current state

    The current state of the HoC, you can change it to see how the the HoC changes.

Slider Label​

Just like Label Slider. In Value Slider, the label aside to slider is Slider Label, the position of the slider label is auto calculated to stick with slider's current tick. So, you cannot configure the slider label's position.

Label Slider Edit​

By default, Value Slider will show two images and the a slider label. If you want to show more images and labels, you can right click the HoC and select Edit to go into HoC editor to change default config.

Value Slider's outlook and setting are just like Label Slider.