{
"type": "object",
"properties": {
"type": {
"const": "Slider",
"default": "Slider",
"type": "string"
},
"id": {
"type": [
"string",
"null"
],
"default": null,
"description": "HTML id attribute for CSS targeting. Applied to the outermost element."
},
"cssClass": {
"type": [
"string",
"null"
],
"default": null,
"description": "CSS/Tailwind classes for styling. Accepts a Responsive() for breakpoint-aware classes."
},
"name": {
"type": [
"string",
"null"
],
"default": null,
"description": "State key for reactive binding. Auto-generated if omitted."
},
"value": {
"anyOf": [
{
"type": "number"
},
{
"items": {
"type": "number"
},
"type": "array"
},
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Initial value (number, or [low, high] list when range=True)"
},
"min": {
"default": 0,
"description": "Minimum value",
"type": "number"
},
"max": {
"default": 100,
"description": "Maximum value",
"type": "number"
},
"step": {
"type": [
"number",
"null"
],
"default": null,
"description": "Step increment"
},
"range": {
"default": false,
"description": "Enable two-thumb range selection",
"type": "boolean"
},
"disabled": {
"default": false,
"description": "Whether slider is disabled",
"type": "boolean"
},
"variant": {
"anyOf": [
{
"enum": [
"default",
"success",
"warning",
"destructive",
"info",
"muted"
],
"type": "string"
},
{
"type": "string"
}
],
"default": "default",
"description": "Visual variant for the filled track: default, success, warning, destructive, info, muted"
},
"size": {
"default": "default",
"description": "Track thickness: sm (4px), default (6px), lg (10px)",
"enum": [
"sm",
"default",
"lg"
],
"type": "string"
},
"indicatorClass": {
"type": [
"string",
"null"
],
"default": null,
"description": "Tailwind classes for the filled track (e.g. 'bg-green-500')"
},
"orientation": {
"default": "horizontal",
"description": "Layout direction: horizontal or vertical",
"enum": [
"horizontal",
"vertical"
],
"type": "string"
},
"handleStyle": {
"default": "circle",
"description": "Thumb shape: circle (default round) or bar (tall rounded rectangle)",
"enum": [
"circle",
"bar"
],
"type": "string"
},
"handleClass": {
"type": [
"string",
"null"
],
"default": null,
"description": "Tailwind classes for the thumb (e.g. 'bg-blue-500')"
},
"onChange": {
"$ref": "Action",
"description": "Action(s) to execute when value changes",
"default": null
},
"gradient": {
"type": [
"boolean",
"null"
],
"default": null,
"description": "Gradient fill: None (inherit from theme), True (force on), False (force off)"
}
},
"required": [
"type"
]
}