@salesforce-ux/design-system/__internal/chunked/docs/ui/components/slider/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},2912:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return j},getElement:function(){return C}});var n=l(1594),a=l.n(n),i=l(5671),r=l(6547),d=l(942),s=l.n(d),u=l(2711),m=l(6333),c=l.n(m),o=c()("error-message-id-"),h=function(e){return a().createElement("span",{className:"slds-slider-label"},a().createElement("span",{className:"slds-slider-label__label"},"Slider Label"),a().createElement("span",{className:"slds-slider-label__range"},e.min||"0"," - ",e.max||"100"))},p=function(e){return a().createElement("div",{className:s()("slds-slider",e.className)},a().createElement("input",{"aria-describedby":e["aria-describedby"],id:e.id||c()("slider-id-"),className:"slds-slider__range",type:"range",defaultValue:e.value,min:e.min,max:e.max,step:e.step,disabled:e.disabled}),a().createElement("span",{className:"slds-slider__value","aria-hidden":"true"},e.value))},f=c()("slider-id-"),b=[{id:"default",label:"Default",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:f}),inputId:f},a().createElement(p,{value:"50",id:f}))}],v=c()("slider-id-"),E=[{id:"disabled",label:"Disabled",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:v}),inputId:v},a().createElement(p,{value:"50",disabled:!0,id:v}))},{id:"value-0",label:"Value: 0",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:v,min:"0",max:"100"}),inputId:v},a().createElement(p,{value:"0",id:v}))},{id:"value-25",label:"Value: 25",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:v,min:"0",max:"100"}),inputId:v},a().createElement(p,{value:"25",id:v}))},{id:"value-50",label:"Value: 50",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:v,min:"0",max:"100"}),inputId:v},a().createElement(p,{value:"50",id:v}))},{id:"value-75",label:"Value: 75",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:v,min:"0",max:"100"}),inputId:v},a().createElement(p,{value:"75",id:v}))},{id:"value-100",label:"Value: 100",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:v,min:"0",max:"100"}),inputId:v},a().createElement(p,{value:"100",id:v}))}],g=c()("slider-id-"),_=[{id:"min-max",label:"Min/Max Range",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g,min:"0",max:"400"}),inputId:g},a().createElement(p,{value:"200",min:"0",max:"400",id:g}))},{id:"steps",label:"Min/Max Range with Steps",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g,min:"0",max:"400"}),inputId:g},a().createElement(p,{value:"200",min:"0",max:"400",step:"100",id:g}))},{id:"width-x-small",label:"Width: x-small",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g}),inputId:g},a().createElement(p,{className:"slds-size_x-small",value:"50",id:g}))},{id:"width-small",label:"Width: small",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g}),inputId:g},a().createElement(p,{className:"slds-size_small",value:"50",id:g}))},{id:"width-medium",label:"Width: medium",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g}),inputId:g},a().createElement(p,{className:"slds-size_medium",value:"50",id:g}))},{id:"width-large",label:"Width: large",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g}),inputId:g},a().createElement(p,{className:"slds-size_large",value:"50",id:g}))},{id:"error",label:"Error",element:a().createElement(u.ZS,{hasError:!0,labelContent:a().createElement(h,{id:g}),inputId:g},a().createElement(p,{"aria-describedby":o,className:"slds-size_large",value:"50",id:g}),a().createElement("div",{id:o,className:"slds-form-element__help"},"There is a problem with this field"))},{id:"vertical",label:"Vertical",element:a().createElement(u.ZS,{labelContent:a().createElement(h,{id:g}),inputId:g},a().createElement(p,{value:"50",className:"slds-slider_vertical",id:g}))}],x=l(8342),O=l(806),S=l(9285),y=i.XB.code,N=i.XB.h2,w=i.XB.h3,M=i.XB.li,A=i.XB.p,I=i.XB.strong,V=i.XB.ul,C=function(){return(0,n.createElement)(i.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"An input range slider lets the user specify a numeric value which must be between two specified values."),(0,n.createElement)(r.A,{exampleOnly:!0},(0,O.NO)(b)),N({id:"About-Slider"},"About Slider"),A({},'The slider component is built using a native input form element with the attribute type of "range".'),w({id:"Implementation"},"Implementation"),V({},M({},y({},"slds-slider")," should be applied to the div containing both the ",y({},"<input>")," and the ",y({},"<span>")," that holds the value of the ",y({},"<input>")),M({},y({},"slds-slider__range")," should be applied to the ",y({},"<input>")," element",V({},M({},"The ",y({},"<input>")," should have a unique ID that matches the ",y({},"for")," attribute on the form element ",y({},"<label>")))),M({},"The ",y({},"slds-slider__range")," element can accept 4 attributes that describe the input range:",V({},M({},I({},"value"),": Current value of the input range"),M({},I({},"min"),": Minimum value of a specified range"),M({},I({},"max"),": Maximum value of a specified range"),M({},I({},"step"),": Indicates the granularity that is expected by limiting the allowed values"))),M({},"The ",y({},"slds-slider__value")," span should be updated with the current value of the ",y({},"<input>")),M({},"The ",y({},"slds-slider__value")," element must have ",y({},"aria-hidden=true")," to hide from screen readers as they understand that value already from the ",y({},"<input>")),M({},"The class ",y({},"slds-assistive-text")," can be placed on the ",y({},"<label>"),", or either ",y({},"<span>")," within the ",y({},"<label>"),", to visually hide the either value (or both).")),w({id:"Mobile"},"Mobile"),(0,n.createElement)(S.s9,{patternSpecificText:"sliders will have an increased size to accommodate using a finger instead of the more precise mouse cursor"}),(0,n.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for sliders"},(0,O.NO)(b)),N({id:"Base"},"Base"),(0,n.createElement)(r.A,null,(0,O.NO)(b)),N({id:"States"},"States"),w({id:"Disabled"},"Disabled"),(0,n.createElement)(r.A,null,(0,O.NO)(E,"disabled")),w({id:"Value:-0"},"Value: 0"),(0,n.createElement)(r.A,null,(0,O.NO)(E,"value-0")),w({id:"Value:-25"},"Value: 25"),(0,n.createElement)(r.A,null,(0,O.NO)(E,"value-25")),w({id:"Value:-50"},"Value: 50"),(0,n.createElement)(r.A,null,(0,O.NO)(E,"value-50")),w({id:"Value:-75"},"Value: 75"),(0,n.createElement)(r.A,null,(0,O.NO)(E,"value-75")),w({id:"Value:-100"},"Value: 100"),(0,n.createElement)(r.A,null,(0,O.NO)(E,"value-100")),N({id:"Examples"},"Examples"),w({id:"MinMax-Range"},"Min/Max Range"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"min-max")),w({id:"MinMax-Range-with-Steps"},"Min/Max Range with Steps"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"steps")),w({id:"Width:-x-small"},"Width: x-small"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"width-x-small")),w({id:"Width:-small"},"Width: small"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"width-small")),w({id:"Width:-medium"},"Width: medium"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"width-medium")),w({id:"Width:-large"},"Width: large"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"width-large")),w({id:"Error"},"Error"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"error")),N({id:"Modifiers"},"Modifiers"),w({id:"Vertical"},"Vertical"),(0,n.createElement)(r.A,null,(0,O.NO)(_,"vertical")),N({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(x.A,{name:"slider",type:"component"}))},j=function(){return(0,i.Qr)(C())}},5206:function(e){e.exports=ReactDOM}},a={};function i(e){var t=a[e];if(void 0!==t)return t.exports;var l=a[e]={id:e,exports:{}};return n[e](l,l.exports,i),l.exports}i.m=n,i.amdO={},e=[],i.O=function(t,l,n,a){if(!l){var r=1/0;for(m=0;m<e.length;m++){l=e[m][0],n=e[m][1],a=e[m][2];for(var d=!0,s=0;s<l.length;s++)(!1&a||r>=a)&&Object.keys(i.O).every(function(e){return i.O[e](l[s])})?l.splice(s--,1):(d=!1,a<r&&(r=a));if(d){e.splice(m--,1);var u=n();void 0!==u&&(t=u)}}return t}a=a||0;for(var m=e.length;m>0&&e[m-1][2]>a;m--)e[m]=e[m-1];e[m]=[l,n,a]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var a=Object.create(null);i.r(a);var r={};t=t||[null,l({}),l([]),l(l)];for(var d=2&n&&e;("object"==typeof d||"function"==typeof d)&&!~t.indexOf(d);d=l(d))Object.getOwnPropertyNames(d).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},i.d(a,r),a},i.d=function(e,t){for(var l in t)i.o(t,l)&&!i.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=264,function(){var e={264:0};i.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,a,r=l[0],d=l[1],s=l[2],u=0;if(r.some(function(t){return 0!==e[t]})){for(n in d)i.o(d,n)&&(i.m[n]=d[n]);if(s)var m=s(i)}for(t&&t(l);u<r.length;u++)a=r[u],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(m)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),i.nc=void 0;var r=i.O(void 0,[3540],function(){return i(2912)});r=i.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/slider/docs.mdx.js"]=r}();