The Price Slider is an input component designed for creating price ranges without being dependent on a specific data source. This flexibility makes it versatile for integration with various platforms, such as Shopify, provided the necessary minimum and maximum inputs are available.

Nested Components

The Price Slider is composed of several nested components that allow for extensive customization of its visual elements:

• Slider Container: This is the container that holds the core visual elements of the slider track and pointers. Note: The layers within the Slider Container are essential and cannot be deleted.
• Min Pointer & Max Pointer: These are the handles that users drag to select a price range, representing the minimum and maximum values, respectively. These pointers are absolutely positioned on the track, and adjusting their size requires subsequent adjustment of their positioning to keep them on the track.
• Background Track: Represents the full length of the slider.
• Selected Track: The highlighted section of the track that appears between the Min Pointer and Max Pointer as a user interacts with the slider.
• Inputs Container: This container holds the input fields for the minimum and maximum values. Note: The wrappers for the min and max input fields within this container can be safely deleted if you choose not to display the input fields.

You can rearrange the Slider Container and Inputs Container within the Layout to position the input fields above or below the slider track.

Available Properties

The main Price Slider component has two primary properties configured in the Settings Panel:

• Initial Min/Max Values: These values determine the default position of the pointers when the page loads. These initial values must be within the overall minimum and maximum range of the slider.
• Step Property: This property acts as a multiplier, creating incremental changes when a user adjusts the slider or text box values.