Elastic Suite allows to display custom attributes with sliders (Price for example).

Prerequisites

• Attribute values must be exclusively digits
• Attribute must use “Decimal Number” as imput validation, or “price” as input type.

your attribute values must be exclusively digits you must specify that your attribute is using “Decimal Number” as imput validation, or “price” as input type.

Following will use the attribute “Temperature” as an example.

Create the attribute

Under Stores > Product > Attributes > create a new attribute

The attribute must be named and Input type must be “Text Field” and Input Validation for store Owner = Decimal Number

Next step is to configure the attribute for being filterable in layered navigation and/or in search.

Back in tab StoreFront properties, a fieldset Slider Display Configuration is available. In this fieldset, the display of your newly created attribute can be configured :

Parameter	Default value	Description
Display pattern		In this field, a pattern for the slider can be entered. “%s” represents the value. So if “%s °C” is typed, result can be “20 °C”.
Display precision	0	The number of digits to show for precision when filtering. If set to 0, the slider will only display integer values.

Once it’s done, Attributes values can be contributed for products. A full reindex is needed to see result in frontoffice.

The slider should now be displayed in the Front-Office :