Slider Component

The Slider component allows for the adjustment of a numerical value within a defined range using a graphical slider interface. It is built using Material-UI components and integrates seamlessly with forms managed by React Hook Form.

Schema

warning

Note: Ensure that the slider values are managed correctly in the form state to avoid discrepancies and state synchronization issues.

{
    "name": "volume",
    "meta": {
        "displayName": "Volume Control",
        "displayType": "slider",
        "value": 20,
        "min": 0,
        "max": 100,
        "step": 1,
        "description": "Adjust the volume level.",
        "readOnly": false,
        "htmlProps": {
            "showInfoIcon": true,
            "showRange": true
        },
        "validation": {
            "infoDetail": {
                "infoMsg": "Choose a value between 0 and 100"
            }
        }
    }
}

Example

Form Data:

{}

;

Props

`meta` object

Name	Description	Type
`displayName`	The label displayed above the slider	string
`displayType`	Type of the field display, which is `"slider"` in this case	string
`value`	Initial value of the slider	number
`min`	Minimum value the slider can adjust to	number
`max`	Maximum value the slider can adjust to	number
`step`	The granularity that the slider can step through	number
`description`	A brief description of what the slider controls	string
`htmlProps`	Additional HTML properties like `showInfoIcon`	object
`allowDynamic`	Enable Static or dynamic input for array input	boolean
`showRange`	Show range text below slider	boolean
`readOnly`	A readonly field is not editable and value cannot be changed	boolean

`htmlProps` object

Name	Description	Type
`showInfoIcon`	Toggles visibility of an info icon with a tooltip on hover	boolean

Interaction Handlers

Name	Description
`handleChange`	Function to execute when the slider value changes
`validationRules`	Validation rules passed to the `Controller` component

Example JSON

Basic Slider

{
    "name": "brightness",
    "meta": {
        "displayName": "Screen Brightness",
        "displayType": "slider",
        "value": 50,
        "min": 0,
        "max": 100,
        "step": 10,
        "description": "Adjust screen brightness level."
    }
}

Slider with Info Icon and Validation

{
    "name": "contrast",
    "meta": {
        "displayName": "Screen Contrast",
        "displayType": "slider",
        "value": 50,
        "min": 10,
        "max": 90,
        "step": 5,
        "description": "Adjust screen contrast level.",
        "htmlProps": {
            "showInfoIcon": true
        },
        "validation": {
            "infoDetail": {
                "infoMsg": "Choose a value between 10 and 90"
            }
        }
    }
}

Schema​

Example​

Props​

meta object​

htmlProps object​

Interaction Handlers​

Example JSON​

Basic Slider​

Slider with Info Icon and Validation​