The Slider block in Greyd Forms allows users to select a numeric value by dragging a handle along a visual scale. After inserting the block into a form, you can directly edit the labels that appear before and/or after the slider in the editor interface.
Settings
In the General section, you can customize the automatically prepopulated field name that will be submitted with the form. Additionally, there’s an option to mark the field as required.
Under Values, you can configure the functional range of the slider. This includes the start value, minimum and maximum limits, and the increment step between selectable values.
The Assistance section includes an optional tooltip text field, which will be shown next to the label if text is entered.
The block also supports Animations. In the Advanced section, you can find settings for additional CSS classes, the Greyd Styles Class and toggles to hide the block per breakpoint.
Styles
In the Dimension section, you can apply paddings for all sides and margins for top and bottom using WordPress Core controls.
The Label settings allow you to adjust the font size and color of the labels shown before and after the slider value. For the font size there are multiple options available, see the Range Unit Control component documentation. The settings can be changed for the hover state as well.
The Value section controls the appearance of the numeric value shown in the label between the before and after labels. It has the same options as the Label component, see above for more details.
The Colors section enables you to set individual colors for various elements of the slider:
- Rail (default and active)
- Track (default and active)
- Handle color (default and active)
- Handle border color (default and active)
- Tooltip background and text
In the Size section, you can configure dimensions for the track’s width and height, handle size, and tooltip font size. Refer to the Range Unit Control component documentation for details. In addition, the sizes can be adjusted per breakpoint.
Finally, the Border Radius section allows you to round the corners of the track, handle, and tooltip. These settings are documented in the Dimenson Control Border Radius component documentation