quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/range" }, "props": { "name": { "type": "String", "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL", "examples": [ "car_id" ], "category": "behavior", "addedIn": "v1.9.0" }, "value": { "type": "Object", "desc": "Model of the component of type { min, max } (both values must be between global min/max); Either use this property (along with a listener for 'input' event) OR use v-model directive", "definition": { "min": { "type": "Number", "desc": "Model value for left thumb", "examples": [ 2 ] }, "max": { "type": "Number", "desc": "Model value for right thumb", "examples": [ 12 ] } }, "examples": [ "v-model=\"positionModel\"" ], "category": "model" }, "min": { "type": "Number", "desc": "Minimum value of the model", "default": 0, "examples": [ ":min=\"0\"" ], "category": "model" }, "max": { "type": "Number", "desc": "Maximum value of the model", "default": 100, "examples": [ ":max=\"100\"" ], "category": "model" }, "step": { "type": "Number", "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity", "default": 1, "examples": [ ":step=\"1\"" ], "category": "model" }, "reverse": { "type": "Boolean", "desc": "Work in reverse (changes direction)", "category": "behavior", "addedIn": "v1.5.0" }, "vertical": { "type": "Boolean", "desc": "Display in vertical direction", "category": "behavior", "addedIn": "v1.10.0" }, "drag-range": { "type": "Boolean", "desc": "User can drag range instead of just the two thumbs", "category": "content" }, "drag-only-range": { "type": "Boolean", "desc": "User can drag only the range instead and NOT the two thumbs", "category": "content" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "label": { "type": "Boolean", "desc": "Popup labels (for left and right thumbs) when user clicks/taps on the slider thumb and moves it", "category": "labels" }, "label-color": { "type": "String", "desc": "Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used", "examples": [ "primary", "teal-10" ], "category": "labels" }, "label-text-color": { "type": "String", "desc": "Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used", "examples": [ "primary", "teal-10" ], "category": "labels", "addedIn": "v1.1.0" }, "left-label-color": { "type": "String", "desc": "Color name for left label background from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "labels" }, "left-label-text-color": { "type": "String", "desc": "Color name for left label text from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "labels", "addedIn": "v1.1.0" }, "right-label-color": { "type": "String", "desc": "Color name for right label background from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "labels" }, "right-label-text-color": { "type": "String", "desc": "Color name for right label text from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "labels", "addedIn": "v1.1.0" }, "left-label-value": { "type": [ "String", "Number" ], "desc": "Override default label for min value", "examples": [ ":left-label-value=\"model.min + 'px'\"" ], "category": "labels" }, "right-label-value": { "type": [ "String", "Number" ], "desc": "Override default label for max value", "examples": [ ":right-label-value=\"model.max + 'px'\"" ], "category": "labels" }, "label-always": { "type": "Boolean", "desc": "Always display the labels", "category": "labels" }, "markers": { "type": "Boolean", "desc": "Display markers on the track, one for each possible value for the model", "category": "content" }, "snap": { "type": "Boolean", "desc": "Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop", "category": "content" }, "thumb-path": { "type": "String", "desc": "Set custom thumbs svg path", "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0", "examples": [ "M5 5 h10 v10 h-10 v-10" ], "category": "style", "addedIn": "v1.5.10" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style" }, "dense": { "type": "Boolean", "desc": "Dense mode; occupies less space", "category": "style" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" }, "readonly": { "type": "Boolean", "desc": "Put component in readonly mode", "category": "state" }, "tabindex": { "type": [ "Number", "String" ], "desc": "Tabindex HTML attribute value", "examples": [ "0", "100" ], "category": "general" } }, "events": { "input": { "desc": "Emitted when the component needs to change the model; Is also used by v-model", "params": { "value": { "type": "Any", "desc": "New model value", "required": true } } }, "change": { "desc": "Emitted on lazy model value change (after user slides then releases thumb)", "params": { "value": { "type": "Any", "desc": "New model value", "required": true } } }, "pan": { "desc": "Triggered when user starts panning on the component", "params": { "phase": { "type": "String", "desc": "Phase of panning", "values": [ "start", "end" ] } }, "addedIn": "v1.14.0" } } }