text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[37450],{37450:(e,a,t)=>{t.r(a),t.d(a,{default:()=>Q});var i=t(83673);const l=(0,i._)("p",null,"The QRange component is a great way to offer the user the selection of a sub-range of values between a minimum and maximum value, with optional steps to select those values. An example use case for the Range component would be to offer a price range selection.",-1),n=(0,i.Uk)("Also check out its “sibling”, the "),o=(0,i.Uk)("QSlider"),s=(0,i.Uk)(" component."),r=(0,i._)("p",null,[(0,i.Uk)("Notice we are using an object for the selection, which holds values for both the lower value of the selected range - "),(0,i._)("code",{class:"doc-token"},"rangeValues.min"),(0,i.Uk)(" and the higher value - "),(0,i._)("code",{class:"doc-token"},"rangeValues.max"),(0,i.Uk)(".")],-1),d=(0,i._)("div",{class:"doc-note doc-note--warning"},[(0,i._)("p",{class:"doc-note__title"},"WARNING"),(0,i._)("p",null,"You are responsible for accommodating the space around QSlider so that the label and marker labels won’t overlap the other content on your page. You can use CSS margin or padding for this purpose.")],-1),c=(0,i.Uk)("With inner min/max "),g=(0,i._)("p",null,[(0,i.Uk)("Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use "),(0,i._)("code",{class:"doc-token"},"inner-min"),(0,i.Uk)(" and "),(0,i._)("code",{class:"doc-token"},"inner-max"),(0,i.Uk)(" props. First prop needs to be higher or equal to "),(0,i._)("code",{class:"doc-token"},"min"),(0,i.Uk)(" prop while the latter needs to be lower or equal to the "),(0,i._)("code",{class:"doc-token"},"max"),(0,i.Uk)(" prop.")],-1),h=(0,i._)("p",null,[(0,i.Uk)("The "),(0,i._)("code",{class:"doc-token"},"step"),(0,i.Uk)(" property can also be a floating point number (or numeric "),(0,i._)("code",{class:"doc-token"},"0"),(0,i.Uk)(" if you need infinite precision).")],-1),m=(0,i._)("p",null,"In the example below, move the slider to see the label.",-1),u=(0,i._)("p",null,"The example below is better highlighting how QRange handles label positioning so that it always stays inside the QRange’s box horizontally.",-1),p=(0,i.Uk)("Marker labels "),k=(0,i._)("div",{class:"doc-note doc-note--tip"},[(0,i._)("p",{class:"doc-note__title"},"TIP on slots"),(0,i._)("p",null,[(0,i.Uk)("In order to use the marker label slots (see below), you must enable them by using the "),(0,i._)("code",{class:"doc-token"},"marker-labels"),(0,i.Uk)(" prop.")])],-1),b=(0,i.Uk)("Other customizations "),f=(0,i._)("p",null,[(0,i.Uk)("Use the "),(0,i._)("code",{class:"doc-token"},"drag-range"),(0,i.Uk)(" or "),(0,i._)("code",{class:"doc-token"},"drag-only-range"),(0,i.Uk)(" props to allow the user to move the selected range or only a predetermined range as a whole.")],-1),y=(0,i._)("p",null,[(0,i.Uk)("When dealing with a native form which has an "),(0,i._)("code",{class:"doc-token"},"action"),(0,i.Uk)(" and a "),(0,i._)("code",{class:"doc-token"},"method"),(0,i.Uk)(" (eg. when using Quasar with ASP.NET controllers), you need to specify the "),(0,i._)("code",{class:"doc-token"},"name"),(0,i.Uk)(" property on QRange, otherwise formData will not contain it (if it should):")],-1);function _(e,a,t,_,v,w){const R=(0,i.up)("doc-link"),W=(0,i.up)("doc-api"),Q=(0,i.up)("doc-example"),U=(0,i.up)("q-badge"),C=(0,i.up)("doc-page");return(0,i.wg)(),(0,i.j4)(C,{"meta-title":_.metaTitle,title:"Range",related:_.related,toc:_.toc,"meta-desc":_.metaDesc},{default:(0,i.w5)((()=>[l,(0,i._)("p",null,[n,(0,i.Wm)(R,{to:"/vue-components/slider"},{default:(0,i.w5)((()=>[o])),_:1}),s]),(0,i._)("h2",{id:"qrange-api",class:"doc-heading doc-h2",onClick:a[0]||(a[0]=e=>_.copyHeading("qrange-api"))},"QRange API"),(0,i.Wm)(W,{file:"QRange"}),(0,i._)("h2",{id:"usage",class:"doc-heading doc-h2",onClick:a[1]||(a[1]=e=>_.copyHeading("usage"))},"Usage"),r,(0,i._)("h3",{id:"standard",class:"doc-heading doc-h3",onClick:a[2]||(a[2]=e=>_.copyHeading("standard"))},"Standard"),d,(0,i.Wm)(Q,{title:"Standard",file:"QRange/Standard"}),(0,i._)("h3",{id:"vertical",class:"doc-heading doc-h3",onClick:a[3]||(a[3]=e=>_.copyHeading("vertical"))},"Vertical"),(0,i.Wm)(Q,{title:"Vertical orientation",file:"QRange/Vertical"}),(0,i._)("h3",{id:"with-inner-min-max",class:"doc-heading doc-h3",onClick:a[4]||(a[4]=e=>_.copyHeading("with-inner-min-max"))},[c,(0,i.Wm)(U,{align:"top",color:"brand-primary",label:"v2.4+"})]),g,(0,i.Wm)(Q,{title:"Inner min/max",file:"QRange/InnerMinMax"}),(0,i._)("h3",{id:"with-step",class:"doc-heading doc-h3",onClick:a[5]||(a[5]=e=>_.copyHeading("with-step"))},"With step"),(0,i.Wm)(Q,{title:"With Step",file:"QRange/Step"}),h,(0,i.Wm)(Q,{title:"Floating point",file:"QRange/FloatingPoint"}),(0,i.Wm)(Q,{title:"Snaps to steps",file:"QRange/Snap"}),(0,i._)("h3",{id:"with-label",class:"doc-heading doc-h3",onClick:a[6]||(a[6]=e=>_.copyHeading("with-label"))},"With label"),m,(0,i.Wm)(Q,{title:"With label",file:"QRange/Label"}),(0,i.Wm)(Q,{title:"Always display label",file:"QRange/LabelAlways"}),(0,i.Wm)(Q,{title:"Custom label values",file:"QRange/LabelValue"}),u,(0,i.Wm)(Q,{title:"Long label",file:"QRange/LabelLong"}),(0,i._)("h3",{id:"markers",class:"doc-heading doc-h3",onClick:a[7]||(a[7]=e=>_.copyHeading("markers"))},"Markers"),(0,i.Wm)(Q,{title:"Markers",file:"QRange/Markers"}),(0,i._)("h3",{id:"marker-labels",class:"doc-heading doc-h3",onClick:a[8]||(a[8]=e=>_.copyHeading("marker-labels"))},[p,(0,i.Wm)(U,{align:"top",color:"brand-primary",label:"v2.4+"})]),(0,i.Wm)(Q,{title:"Marker labels",file:"QRange/MarkerLabels"}),k,(0,i.Wm)(Q,{title:"Marker label slots",file:"QRange/MarkerLabelSlots"}),(0,i._)("h3",{id:"other-customizations",class:"doc-heading doc-h3",onClick:a[9]||(a[9]=e=>_.copyHeading("other-customizations"))},[b,(0,i.Wm)(U,{align:"top",color:"brand-primary",label:"v2.4+"})]),(0,i.Wm)(Q,{title:"Color customizations",file:"QRange/RangeColoring"}),(0,i.Wm)(Q,{title:"Hide selection bar",file:"QRange/NoSelection"}),(0,i.Wm)(Q,{title:"Custom track images",file:"QRange/TrackImages"}),(0,i.Wm)(Q,{title:"Track & thumb size",file:"QRange/RangeSizes"}),(0,i._)("h3",{id:"dragging-range",class:"doc-heading doc-h3",onClick:a[10]||(a[10]=e=>_.copyHeading("dragging-range"))},"Dragging range"),f,(0,i.Wm)(Q,{title:"Drag range",file:"QRange/Drag"}),(0,i.Wm)(Q,{title:"Drag range + snap to step",file:"QRange/DragSnap"}),(0,i.Wm)(Q,{title:"Drag only range (fixed interval)",file:"QRange/DragOnly"}),(0,i._)("h3",{id:"lazy-input",class:"doc-heading doc-h3",onClick:a[11]||(a[11]=e=>_.copyHeading("lazy-input"))},"Lazy input"),(0,i.Wm)(Q,{title:"Lazy input",file:"QRange/Lazy"}),(0,i._)("h3",{id:"null-values",class:"doc-heading doc-h3",onClick:a[12]||(a[12]=e=>_.copyHeading("null-values"))},"Null values"),(0,i.Wm)(Q,{title:"Null values",file:"QRange/Null"}),(0,i._)("h3",{id:"reverse",class:"doc-heading doc-h3",onClick:a[13]||(a[13]=e=>_.copyHeading("reverse"))},"Reverse"),(0,i.Wm)(Q,{title:"In reverse",file:"QRange/Reverse"}),(0,i._)("h3",{id:"dark-readonly-disable",class:"doc-heading doc-h3",onClick:a[14]||(a[14]=e=>_.copyHeading("dark-readonly-disable"))},"Dark, readonly, disable"),(0,i.Wm)(Q,{title:"Dark",file:"QRange/Dark",dark:""}),(0,i.Wm)(Q,{title:"Readonly",file:"QRange/Readonly"}),(0,i.Wm)(Q,{title:"Disable",file:"QRange/Disable"}),(0,i._)("h3",{id:"with-qitem",class:"doc-heading doc-h3",onClick:a[15]||(a[15]=e=>_.copyHeading("with-qitem"))},"With QItem"),(0,i.Wm)(Q,{title:"With QItem",file:"QRange/List"}),(0,i._)("h3",{id:"native-form-submit",class:"doc-heading doc-h3",onClick:a[16]||(a[16]=e=>_.copyHeading("native-form-submit"))},"Native form submit"),y,(0,i.Wm)(Q,{title:"Native form",file:"QRange/NativeForm"})])),_:1},8,["meta-title","related","toc","meta-desc"])}var v=t(17536);const w={name:"DocMarkdownPage",setup(){return{metaTitle:"Range",metaDesc:"The QRange Vue component offers a way for the user to select from a sub-range of values between a maximum and maximum value, with optional steps.",related:[{name:"滑块",category:"表单组件",path:"/vue-components/slider"},{name:"字段(包装器)",category:"表单组件",path:"/vue-components/field"}],toc:[{id:"qrange-api",title:"QRange API"},{id:"usage",title:"Usage"},{id:"standard",title:"Standard",sub:!0},{id:"vertical",title:"Vertical",sub:!0},{id:"with-inner-min-max",title:"With inner min/max",sub:!0},{id:"with-step",title:"With step",sub:!0},{id:"with-label",title:"With label",sub:!0},{id:"markers",title:"Markers",sub:!0},{id:"marker-labels",title:"Marker labels",sub:!0},{id:"other-customizations",title:"Other customizations",sub:!0},{id:"dragging-range",title:"Dragging range",sub:!0},{id:"lazy-input",title:"Lazy input",sub:!0},{id:"null-values",title:"Null values",sub:!0},{id:"reverse",title:"Reverse",sub:!0},{id:"dark-readonly-disable",title:"Dark, readonly, disable",sub:!0},{id:"with-qitem",title:"With QItem",sub:!0},{id:"native-form-submit",title:"Native form submit",sub:!0}],copyHeading:v.Et}}};var R=t(74260);const W=(0,R.Z)(w,[["render",_]]),Q=W}}]);