Slider Field in HT Contact Forms

1. Admin Label #

Internal label for admin use only. Helps you identify the field easily inside the form editor.

2. Field Label #

The label users will see next to or above the slider input in the frontend form.

3. Label Position #

Choose where to place the field label relative to the slider input:

• Top
• Right
• Bottom
• Left
• Default

4. Hide Label #

Enable this toggle if you want to hide the field label from being displayed on the frontend.

5. Min Value #

Set the minimum value that the slider can reach.
✅ Example: 0

6. Max Value #

Set the maximum value that the slider can reach.
✅ Example: 100

7. Step #

Specify the increment between slider values as the user drags the slider.
✅ Example: 1 (If set to 5, the slider will move 0, 5, 10, 15, etc.)

8. Value Display #

Customize how the selected value is displayed next to the slider.
✅ Example format:
Selected Value: {value}

The {value} placeholder will dynamically show the selected number.

9. Default Value #

Set a default slider position or starting value when the form loads.
✅ Example: 25

10. Field Size #

Adjust the slider size to match your form’s design:

• Small
• Medium (Default)
• Large

11. Field Class #

Add a CSS class name to the field if you want to style it differently using custom CSS.

12. Help Message #

Provide helpful hints or instructions about how the slider should be used.
Displayed as a tooltip or message near the field.

13. Message Position #

Decide where to show the help message:

• Default
• Next to Label as Tooltip
• Below Input Element

14. Name Attribute #

Assign a unique HTML name attribute to identify the slider field during form submission.
✅ Example: slider