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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/slider/docs.mdx.js"]=function(e){function t(t){for(var l,r,d=t[0],s=t[1],c=t[2],u=0,o=[];u<d.length;u++)r=d[u],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&o.push(n[r][0]),n[r]=0;for(l in s)Object.prototype.hasOwnProperty.call(s,l)&&(e[l]=s[l]);for(m&&m(t);o.length;)o.shift()();return i.push.apply(i,c||[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,d=1;d<a.length;d++){var s=a[d];0!==n[s]&&(l=!1)}l&&(i.splice(t--,1),e=r(r.s=a[0]))}return e}var l={},n={69:0},i=[];function r(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=l,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(a,l,function(t){return e[t]}.bind(null,l));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var d=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=d.push.bind(d);d.push=t,d=d.slice();for(var c=0;c<d.length;c++)t(d[c]);var m=s;return i.push([798,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},798:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return N})),a.d(t,"getContents",(function(){return D}));var l=a(0),n=a.n(l),i=a(4),r=a(2),d=a(5),s=a.n(d),c=a(8),m=a(25),u=a.n(m),o=u()("error-message-id-"),b=function(e){return n.a.createElement("span",{className:"slds-slider-label"},n.a.createElement("span",{className:"slds-slider-label__label"},"Slider Label"),n.a.createElement("span",{className:"slds-slider-label__range"},e.min||"0"," - ",e.max||"100"))},p=function(e){return n.a.createElement("div",{className:s()("slds-slider",e.className)},n.a.createElement("input",{"aria-describedby":e["aria-describedby"],id:e.id||u()("slider-id-"),className:"slds-slider__range",type:"range",defaultValue:e.value,min:e.min,max:e.max,step:e.step,disabled:e.disabled}),n.a.createElement("span",{className:"slds-slider__value","aria-hidden":"true"},e.value))},h=u()("slider-id-"),f=[{id:"default",label:"Default",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:h}),inputId:h},n.a.createElement(p,{value:"50",id:h}))}],E=u()("slider-id-"),v=[{id:"disabled",label:"Disabled",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:E}),inputId:E},n.a.createElement(p,{value:"50",disabled:!0,id:E}))},{id:"value-0",label:"Value: 0",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:E,min:"0",max:"100"}),inputId:E},n.a.createElement(p,{value:"0",id:E}))},{id:"value-25",label:"Value: 25",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:E,min:"0",max:"100"}),inputId:E},n.a.createElement(p,{value:"25",id:E}))},{id:"value-50",label:"Value: 50",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:E,min:"0",max:"100"}),inputId:E},n.a.createElement(p,{value:"50",id:E}))},{id:"value-75",label:"Value: 75",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:E,min:"0",max:"100"}),inputId:E},n.a.createElement(p,{value:"75",id:E}))},{id:"value-100",label:"Value: 100",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:E,min:"0",max:"100"}),inputId:E},n.a.createElement(p,{value:"100",id:E}))}],O=u()("slider-id-"),j=[{id:"min-max",label:"Min/Max Range",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O,min:"0",max:"400"}),inputId:O},n.a.createElement(p,{value:"200",min:"0",max:"400",id:O}))},{id:"steps",label:"Min/Max Range with Steps",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O,min:"0",max:"400"}),inputId:O},n.a.createElement(p,{value:"200",min:"0",max:"400",step:"100",id:O}))},{id:"width-x-small",label:"Width: x-small",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O}),inputId:O},n.a.createElement(p,{className:"slds-size_x-small",value:"50",id:O}))},{id:"width-small",label:"Width: small",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O}),inputId:O},n.a.createElement(p,{className:"slds-size_small",value:"50",id:O}))},{id:"width-medium",label:"Width: medium",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O}),inputId:O},n.a.createElement(p,{className:"slds-size_medium",value:"50",id:O}))},{id:"width-large",label:"Width: large",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O}),inputId:O},n.a.createElement(p,{className:"slds-size_large",value:"50",id:O}))},{id:"error",label:"Error",element:n.a.createElement(c.b,{hasError:!0,labelContent:n.a.createElement(b,{id:O}),inputId:O},n.a.createElement(p,{"aria-describedby":o,className:"slds-size_large",value:"50",id:O}),n.a.createElement("div",{id:o,className:"slds-form-element__help"},"There is a problem with this field"))},{id:"vertical",label:"Vertical",element:n.a.createElement(c.b,{labelContent:n.a.createElement(b,{id:O}),inputId:O},n.a.createElement(p,{value:"50",className:"slds-slider_vertical",id:O}))}],g=a(40),x=a(1),_=a(39),y=i.c.code,S=i.c.h2,w=i.c.h3,M=i.c.li,I=i.c.p,V=i.c.strong,C=i.c.ul,N=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"An input range slider lets the user specify a numeric value which must be between two specified values."),Object(l.createElement)(r.a,{exampleOnly:!0},Object(x.f)(f)),S({id:"About-Slider"},"About Slider"),I({},'The slider component is built using a native input form element with the attribute type of "range".'),w({id:"Implementation"},"Implementation"),C({},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",C({},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:",C({},M({},V({},"value"),": Current value of the input range"),M({},V({},"min"),": Minimum value of a specified range"),M({},V({},"max"),": Maximum value of a specified range"),M({},V({},"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"),Object(l.createElement)(_.a,{patternSpecificText:"sliders will have an increased size to accommodate using a finger instead of the more precise mouse cursor"}),Object(l.createElement)(r.a,{frameOnly:!0,frameTitle:"Example mobile styles for sliders"},Object(x.f)(f)),S({id:"Base"},"Base"),Object(l.createElement)(r.a,null,Object(x.f)(f)),S({id:"States"},"States"),w({id:"Disabled"},"Disabled"),Object(l.createElement)(r.a,null,Object(x.f)(v,"disabled")),w({id:"Value:-0"},"Value: 0"),Object(l.createElement)(r.a,null,Object(x.f)(v,"value-0")),w({id:"Value:-25"},"Value: 25"),Object(l.createElement)(r.a,null,Object(x.f)(v,"value-25")),w({id:"Value:-50"},"Value: 50"),Object(l.createElement)(r.a,null,Object(x.f)(v,"value-50")),w({id:"Value:-75"},"Value: 75"),Object(l.createElement)(r.a,null,Object(x.f)(v,"value-75")),w({id:"Value:-100"},"Value: 100"),Object(l.createElement)(r.a,null,Object(x.f)(v,"value-100")),S({id:"Examples"},"Examples"),w({id:"MinMax-Range"},"Min/Max Range"),Object(l.createElement)(r.a,null,Object(x.f)(j,"min-max")),w({id:"MinMax-Range-with-Steps"},"Min/Max Range with Steps"),Object(l.createElement)(r.a,null,Object(x.f)(j,"steps")),w({id:"Width:-x-small"},"Width: x-small"),Object(l.createElement)(r.a,null,Object(x.f)(j,"width-x-small")),w({id:"Width:-small"},"Width: small"),Object(l.createElement)(r.a,null,Object(x.f)(j,"width-small")),w({id:"Width:-medium"},"Width: medium"),Object(l.createElement)(r.a,null,Object(x.f)(j,"width-medium")),w({id:"Width:-large"},"Width: large"),Object(l.createElement)(r.a,null,Object(x.f)(j,"width-large")),w({id:"Error"},"Error"),Object(l.createElement)(r.a,null,Object(x.f)(j,"error")),S({id:"Modifiers"},"Modifiers"),w({id:"Vertical"},"Vertical"),Object(l.createElement)(r.a,null,Object(x.f)(j,"vertical")),S({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(l.createElement)(g.a,{name:"slider",type:"component"}))},D=function(){return Object(i.a)(N())}}});