quasar

{ "mixins": [ "composables/private/use-form" ], "props": { "min": { "type": "Number", "desc": "Minimum value of the model; Set track's minimum value", "default": 0, "examples": [ ":min=\"0\"" ], "category": "model" }, "max": { "type": "Number", "desc": "Maximum value of the model; Set track's maximum value", "default": 100, "examples": [ ":max=\"100\"" ], "category": "model" }, "inner-min": { "type": "Number", "desc": "Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop", "examples": [ ":inner-min=\"0\"" ], "category": "model", "addedIn": "v2.4" }, "inner-max": { "type": "Number", "desc": "Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop", "examples": [ ":inner-max=\"100\"" ], "category": "model", "addedIn": "v2.4" }, "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" }, "snap": { "type": "Boolean", "desc": "Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop", "category": "behavior" }, "reverse": { "type": "Boolean", "desc": "Work in reverse (changes direction)", "category": "behavior" }, "vertical": { "type": "Boolean", "desc": "Display in vertical direction", "category": "behavior" }, "color": { "extends": "color" }, "track-color": { "extends": "color", "desc": "Color name for the track (can be 'transparent' too) from the Quasar Color Palette", "addedIn": "v2.4" }, "track-img": { "type": "String", "desc": "Apply a pattern image on the track", "transformAssetUrls": true, "examples": [ "~assets/my-pattern.png" ], "category": "style", "addedIn": "v2.4" }, "inner-track-color": { "extends": "color", "desc": "Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette", "addedIn": "v2.4" }, "inner-track-img": { "type": "String", "desc": "Apply a pattern image on the inner track", "transformAssetUrls": true, "examples": [ "~assets/my-pattern.png" ], "category": "style", "addedIn": "v2.4" }, "selection-color": { "extends": "color", "desc": "Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette", "addedIn": "v2.4" }, "selection-img": { "type": "String", "desc": "Apply a pattern image on the selection bar", "transformAssetUrls": true, "examples": [ "~assets/my-pattern.png" ], "category": "style", "addedIn": "v2.4" }, "label": { "type": "Boolean", "desc": "Popup a label when user clicks/taps on the slider thumb and moves it", "category": "content" }, "label-color": { "extends": "color" }, "label-text-color": { "extends": "color" }, "switch-label-side": { "type": "Boolean", "desc": "Switch the position of the label (top <-> bottom or left <-> right)", "category": "style", "addedIn": "v2.4" }, "label-always": { "type": "Boolean", "desc": "Always display the label", "category": "behavior|content" }, "markers": { "type": [ "Boolean", "Number" ], "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)", "category": "content", "examples": [ "markers", ":markers=\"5\"" ] }, "marker-labels": { "type": [ "Boolean", "Array", "Object", "Function" ], "tsType": "SliderMarkerLabels", "desc": "Configure the marker labels (or show the default ones if 'true'); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition", "definition": { "value": { "type": "Number", "required": true, "desc": "Value of equivalent model where to position the marker", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Label to use", "__exemption": [ "examples" ] }, "classes": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "CSS classes to be attributed to the marker label", "examples": [ "my-class-name" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } }, "params": { "value": { "type": "Number", "desc": "The marker value to transform", "required": true, "examples": [ "5" ] } }, "returns": { "type": [ "String", "Object" ], "desc": "Marker definition Object or directly a String for the label of the marker", "definition": { "value": { "type": "Number", "desc": "Value of equivalent model where to position the marker", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Label to use", "__exemption": [ "examples" ] }, "classes": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "CSS classes to be attributed to the marker label", "examples": [ "my-class-name" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } } }, "category": "content", "examples": [ true, "[ { value: 0, label: '0%' }, { value: 5, classes: 'my-class', style: { width: '24px' } } ]", "{ 0: '0%', 5: { label: '5%', classes: 'my-class', style: { width: '24px' } } }", "val => (10 * val) + '%'", "val => ({ label: (10 * val) + '%', classes: 'my-class', style: { width: '24px' } })" ], "addedIn": "v2.4" }, "marker-labels-class": { "type": "String", "desc": "CSS class(es) to apply to the marker labels container", "examples": [ "text-orange" ], "category": "style", "addedIn": "v2.4" }, "switch-marker-labels-side": { "type": "Boolean", "desc": "Switch the position of the marker labels (top <-> bottom or left <-> right)", "category": "style", "addedIn": "v2.4" }, "track-size": { "type": "String", "desc": "Track size (including CSS unit)", "default": "4px", "examples": [ "35px" ], "category": "style", "addedIn": "v2.4" }, "thumb-size": { "type": "String", "desc": "Thumb size (including CSS unit)", "default": "20px", "examples": [ "20px" ], "category": "style", "addedIn": "v2.4" }, "thumb-color": { "extends": "color", "addedIn": "v2.4" }, "thumb-path": { "type": "String", "desc": "Set custom thumb 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" }, "dark": { "extends": "dark" }, "dense": { "extends": "dense" }, "disable": { "extends": "disable" }, "readonly": { "extends": "readonly" }, "tabindex": { "extends": "tabindex" } }, "slots": { "marker-label": { "desc": "What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>", "addedIn": "v2.4", "scope": { "marker": { "type": "Object", "tsType": "SliderMarkerLabelConfig", "desc": "Config for current marker label", "definition": { "index": { "type": "Number", "desc": "Index of the marker label (0-based)", "__exemption": [ "examples" ] }, "value": { "type": "Number", "desc": "Equivalent model value for the marker label", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Configured label for the marker", "__exemption": [ "examples" ] }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } } }, "markerList": { "type": "Array", "tsType": "SliderMarkerLabelArrayConfig", "desc": "Array of marker label configs", "definition": { "index": { "type": "Number", "desc": "Index of the marker label (0-based)", "__exemption": [ "examples" ] }, "value": { "type": "Number", "desc": "Equivalent model value for the marker label", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Configured label for the marker", "__exemption": [ "examples" ] }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } } }, "markerMap": { "type": "Object", "tsType": "SliderMarkerLabelObjectConfig", "desc": "Object with key-value where key is the model and the value is the marker label config", "definition": { "...key": { "type": "Object", "desc": "Marker label config", "definition": { "index": { "type": "Number", "desc": "Index of the marker label (0-based)", "__exemption": [ "examples" ] }, "value": { "type": "Number", "desc": "Equivalent model value for the marker label", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Configured label for the marker", "__exemption": [ "examples" ] }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } } } } }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "getStyle": { "type": "Function", "desc": "Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap", "params": { "value": { "type": "Number", "desc": "The marker label equivalent model value", "required": true, "examples": [ "5" ] } }, "returns": { "type": "Object", "desc": "CSS style Object to apply to a marker element at respective model value", "__exemption": [ "examples" ] }, "__exemption": [ "examples" ] } } }, "marker-label-group": { "desc": "What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>", "addedIn": "v2.4", "scope": { "markerList": { "type": "Array", "tsType": "SliderMarkerLabelArrayConfig", "desc": "Array of marker label configs", "definition": { "index": { "type": "Number", "desc": "Index of the marker label (0-based)", "__exemption": [ "examples" ] }, "value": { "type": "Number", "desc": "Equivalent model value for the marker label", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Configured label for the marker", "__exemption": [ "examples" ] }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } } }, "markerMap": { "type": "Object", "tsType": "SliderMarkerLabelObjectConfig", "desc": "Object with key-value where key is the model and the value is the marker label config", "definition": { "...key": { "type": "Object", "desc": "Marker label config", "definition": { "index": { "type": "Number", "desc": "Index of the marker label (0-based)", "__exemption": [ "examples" ] }, "value": { "type": "Number", "desc": "Equivalent model value for the marker label", "__exemption": [ "examples" ] }, "label": { "type": [ "Number", "String" ], "desc": "Configured label for the marker", "__exemption": [ "examples" ] }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "style": { "type": "Object", "tsType": "VueStyleObjectProp", "desc": "Style definitions to be attributed to the marker label", "examples": [ "{ height: '24px' }" ] } } } } }, "classes": { "type": "String", "desc": "Required CSS classes to be applied to the marker element", "__exemption": [ "examples" ] }, "getStyle": { "type": "Function", "desc": "Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap", "params": { "value": { "type": "Number", "desc": "The marker label equivalent model value", "required": true, "examples": [ "5" ] } }, "returns": { "type": "Object", "desc": "CSS style Object to apply to a marker element at respective model value", "__exemption": [ "examples" ] }, "__exemption": [ "examples" ] } } } }, "events": { "change": { "extends": "update:model-value", "desc": "Emitted on lazy model value change (after user slides then releases the thumb)" }, "pan": { "desc": "Triggered when user starts panning on the component", "params": { "phase": { "type": "String", "desc": "Phase of panning", "values": [ "start", "end" ] } } } } }