%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[32],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return T}));var a=t(118),r=t(1100),l=t(1109),i=t(1090),s=t(1117),o=t(1119),c=t(5),u=t(0),d=t(1024),m=t(551),b=t(1087),p=t(1099),h=t(11),j=t(370),f=t(371),x=t(1131),v=t.n(x),g=t(1);const y=Object(d.a)({productionPrefix:"iframe-"});class O extends u.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(j.a)({...Object(m.a)(),plugins:[...Object(m.a)().plugins,Object(f.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(g.jsxs)(g.Fragment,{children:[Object(g.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(g.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(g.jsx)(v.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(g.jsx)(b.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(g.jsx)(p.a,{theme:t,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var S=Object(h.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function k(e){const[n,t]=Object(u.useState)(e.currentTabIndex),{component:d,raw:m,iframe:b,className:p}=e;return Object(g.jsxs)(l.a,{className:Object(c.a)(p,"shadow"),children:[Object(g.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(g.jsxs)(o.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[d&&Object(g.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(i.a,{children:"remove_red_eye"})}),m&&Object(g.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(i.a,{children:"code"})})]})}),Object(g.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(g.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:d&&(b?Object(g.jsx)(S,{children:Object(g.jsx)(d,{})}):Object(g.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(g.jsx)(d,{})}))}),Object(g.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:m&&Object(g.jsx)("div",{className:"flex flex-1",children:Object(g.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}k.defaultProps={currentTabIndex:0};var T=k},2189:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return h}));var a=t(0),r=t.n(a),l=t(1072),i=t(1172),s=t(194),o=t(1126),c=t(2190),u=t.n(c),d=t(1448),m=t.n(d),b=t(1);const p=Object(l.a)({root:{width:200}});function h(){const e=p(),[n,t]=r.a.useState(30);return Object(b.jsxs)("div",{className:e.root,children:[Object(b.jsx)(s.a,{id:"continuous-slider",gutterBottom:!0,children:"Volume"}),Object(b.jsxs)(i.a,{container:!0,spacing:2,children:[Object(b.jsx)(i.a,{item:!0,children:Object(b.jsx)(u.a,{})}),Object(b.jsx)(i.a,{item:!0,xs:!0,children:Object(b.jsx)(o.a,{value:n,onChange:(e,n)=>{t(n)},"aria-labelledby":"continuous-slider"})}),Object(b.jsx)(i.a,{item:!0,children:Object(b.jsx)(m.a,{})})]}),Object(b.jsx)(s.a,{id:"disabled-slider",gutterBottom:!0,children:"Disabled slider"}),Object(b.jsx)(o.a,{disabled:!0,defaultValue:30,"aria-labelledby":"disabled-slider"})]})}},2191:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\nimport VolumeDown from '@material-ui/icons/VolumeDown';\nimport VolumeUp from '@material-ui/icons/VolumeUp';\n\nconst useStyles = makeStyles({\n root: {\n width: 200,\n },\n});\n\nexport default function ContinuousSlider() {\n const classes = useStyles();\n const [value, setValue] = React.useState(30);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <Typography id=\"continuous-slider\" gutterBottom>\n Volume\n </Typography>\n <Grid container spacing={2}>\n <Grid item>\n <VolumeDown />\n </Grid>\n <Grid item xs>\n <Slider value={value} onChange={handleChange} aria-labelledby=\"continuous-slider\" />\n </Grid>\n <Grid item>\n <VolumeUp />\n </Grid>\n </Grid>\n <Typography id=\"disabled-slider\" gutterBottom>\n Disabled slider\n </Typography>\n <Slider disabled defaultValue={30} aria-labelledby=\"disabled-slider\" />\n </div>\n );\n}\n"},2192:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)({root:{width:300}});function o(e){return"".concat(e,"\xb0C")}function c(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"discrete-slider",gutterBottom:!0,children:"Temperature"}),Object(i.jsx)(l.a,{defaultValue:30,getAriaValueText:o,"aria-labelledby":"discrete-slider",valueLabelDisplay:"auto",step:10,marks:!0,min:10,max:110}),Object(i.jsx)(r.a,{id:"discrete-slider",gutterBottom:!0,children:"Disabled"}),Object(i.jsx)(l.a,{defaultValue:30,getAriaValueText:o,"aria-labelledby":"discrete-slider",valueLabelDisplay:"auto",step:10,marks:!0,min:10,max:110,disabled:!0})]})}},2193:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Slider from \'@material-ui/core/Slider\';\n\nconst useStyles = makeStyles({\n root: {\n width: 300,\n },\n});\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function DiscreteSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id="discrete-slider" gutterBottom>\n Temperature\n </Typography>\n <Slider\n defaultValue={30}\n getAriaValueText={valuetext}\n aria-labelledby="discrete-slider"\n valueLabelDisplay="auto"\n step={10}\n marks\n min={10}\n max={110}\n />\n <Typography id="discrete-slider" gutterBottom>\n Disabled\n </Typography>\n <Slider\n defaultValue={30}\n getAriaValueText={valuetext}\n aria-labelledby="discrete-slider"\n valueLabelDisplay="auto"\n step={10}\n marks\n min={10}\n max={110}\n disabled\n />\n </div>\n );\n}\n'},2194:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)({root:{width:300}});function o(e){return"".concat(e,"\xb0C")}function c(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"discrete-slider-small-steps",gutterBottom:!0,children:"Small steps"}),Object(i.jsx)(l.a,{defaultValue:5e-8,getAriaValueText:o,"aria-labelledby":"discrete-slider-small-steps",step:1e-8,marks:!0,min:-5e-8,max:1e-7,valueLabelDisplay:"auto"})]})}},2195:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles({\n root: {\n width: 300,\n },\n});\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function DiscreteSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id=\"discrete-slider-small-steps\" gutterBottom>\n Small steps\n </Typography>\n <Slider\n defaultValue={0.00000005}\n getAriaValueText={valuetext}\n aria-labelledby=\"discrete-slider-small-steps\"\n step={0.00000001}\n marks\n min={-0.00000005}\n max={0.0000001}\n valueLabelDisplay=\"auto\"\n />\n </div>\n );\n}\n"},2196:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)((e=>({root:{width:300},margin:{height:e.spacing(3)}}))),o=[{value:0,label:"0\xb0C"},{value:20,label:"20\xb0C"},{value:37,label:"37\xb0C"},{value:100,label:"100\xb0C"}];function c(e){return"".concat(e,"\xb0C")}function u(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"discrete-slider-custom",gutterBottom:!0,children:"Custom marks"}),Object(i.jsx)(l.a,{defaultValue:20,getAriaValueText:c,"aria-labelledby":"discrete-slider-custom",step:10,valueLabelDisplay:"auto",marks:o})]})}},2197:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 300,\n },\n margin: {\n height: theme.spacing(3),\n },\n}));\n\nconst marks = [\n {\n value: 0,\n label: '0\xb0C',\n },\n {\n value: 20,\n label: '20\xb0C',\n },\n {\n value: 37,\n label: '37\xb0C',\n },\n {\n value: 100,\n label: '100\xb0C',\n },\n];\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function DiscreteSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id=\"discrete-slider-custom\" gutterBottom>\n Custom marks\n </Typography>\n <Slider\n defaultValue={20}\n getAriaValueText={valuetext}\n aria-labelledby=\"discrete-slider-custom\"\n step={10}\n valueLabelDisplay=\"auto\"\n marks={marks}\n />\n </div>\n );\n}\n"},2198:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return d}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)({root:{width:300}}),o=[{value:0,label:"0\xb0C"},{value:20,label:"20\xb0C"},{value:37,label:"37\xb0C"},{value:100,label:"100\xb0C"}];function c(e){return"".concat(e,"\xb0C")}function u(e){return o.findIndex((n=>n.value===e))+1}function d(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"discrete-slider-restrict",gutterBottom:!0,children:"Restricted values"}),Object(i.jsx)(l.a,{defaultValue:20,valueLabelFormat:u,getAriaValueText:c,"aria-labelledby":"discrete-slider-restrict",step:null,valueLabelDisplay:"auto",marks:o})]})}},2199:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles({\n root: {\n width: 300,\n },\n});\n\nconst marks = [\n {\n value: 0,\n label: '0\xb0C',\n },\n {\n value: 20,\n label: '20\xb0C',\n },\n {\n value: 37,\n label: '37\xb0C',\n },\n {\n value: 100,\n label: '100\xb0C',\n },\n];\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nfunction valueLabelFormat(value) {\n return marks.findIndex((mark) => mark.value === value) + 1;\n}\n\nexport default function DiscreteSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id=\"discrete-slider-restrict\" gutterBottom>\n Restricted values\n </Typography>\n <Slider\n defaultValue={20}\n valueLabelFormat={valueLabelFormat}\n getAriaValueText={valuetext}\n aria-labelledby=\"discrete-slider-restrict\"\n step={null}\n valueLabelDisplay=\"auto\"\n marks={marks}\n />\n </div>\n );\n}\n"},2200:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)((e=>({root:{width:300},margin:{height:e.spacing(3)}}))),o=[{value:0,label:"0\xb0C"},{value:20,label:"20\xb0C"},{value:37,label:"37\xb0C"},{value:100,label:"100\xb0C"}];function c(e){return"".concat(e,"\xb0C")}function u(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"discrete-slider-always",gutterBottom:!0,children:"Always visible"}),Object(i.jsx)(l.a,{defaultValue:80,getAriaValueText:c,"aria-labelledby":"discrete-slider-always",step:10,marks:o,valueLabelDisplay:"on"})]})}},2201:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 300,\n },\n margin: {\n height: theme.spacing(3),\n },\n}));\n\nconst marks = [\n {\n value: 0,\n label: '0\xb0C',\n },\n {\n value: 20,\n label: '20\xb0C',\n },\n {\n value: 37,\n label: '37\xb0C',\n },\n {\n value: 100,\n label: '100\xb0C',\n },\n];\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function DiscreteSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id=\"discrete-slider-always\" gutterBottom>\n Always visible\n </Typography>\n <Slider\n defaultValue={80}\n getAriaValueText={valuetext}\n aria-labelledby=\"discrete-slider-always\"\n step={10}\n marks={marks}\n valueLabelDisplay=\"on\"\n />\n </div>\n );\n}\n"},2202:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return d}));var a=t(0),r=t.n(a),l=t(1072),i=t(194),s=t(1126),o=t(1);const c=Object(l.a)({root:{width:300}});function u(e){return"".concat(e,"\xb0C")}function d(){const e=c(),[n,t]=r.a.useState([20,37]);return Object(o.jsxs)("div",{className:e.root,children:[Object(o.jsx)(i.a,{id:"range-slider",gutterBottom:!0,children:"Temperature range"}),Object(o.jsx)(s.a,{value:n,onChange:(e,n)=>{t(n)},valueLabelDisplay:"auto","aria-labelledby":"range-slider",getAriaValueText:u})]})}},2203:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles({\n root: {\n width: 300,\n },\n});\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function RangeSlider() {\n const classes = useStyles();\n const [value, setValue] = React.useState([20, 37]);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <Typography id=\"range-slider\" gutterBottom>\n Temperature range\n </Typography>\n <Slider\n value={value}\n onChange={handleChange}\n valueLabelDisplay=\"auto\"\n aria-labelledby=\"range-slider\"\n getAriaValueText={valuetext}\n />\n </div>\n );\n}\n"},2204:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var a=t(0),r=t.n(a),l=t(1072),i=t(1172),s=t(194),o=t(1126),c=t(548),u=t(1448),d=t.n(u),m=t(1);const b=Object(l.a)({root:{width:250},input:{width:42}});function p(){const e=b(),[n,t]=r.a.useState(30);return Object(m.jsxs)("div",{className:e.root,children:[Object(m.jsx)(s.a,{id:"input-slider",gutterBottom:!0,children:"Volume"}),Object(m.jsxs)(i.a,{container:!0,spacing:2,alignItems:"center",children:[Object(m.jsx)(i.a,{item:!0,children:Object(m.jsx)(d.a,{})}),Object(m.jsx)(i.a,{item:!0,xs:!0,children:Object(m.jsx)(o.a,{value:"number"===typeof n?n:0,onChange:(e,n)=>{t(n)},"aria-labelledby":"input-slider"})}),Object(m.jsx)(i.a,{item:!0,children:Object(m.jsx)(c.a,{className:e.input,value:n,margin:"dense",onChange:e=>{t(""===e.target.value?"":Number(e.target.value))},onBlur:()=>{n<0?t(0):n>100&&t(100)},inputProps:{step:10,min:0,max:100,type:"number","aria-labelledby":"input-slider"}})})]})]})}},2205:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\nimport Input from '@material-ui/core/Input';\nimport VolumeUp from '@material-ui/icons/VolumeUp';\n\nconst useStyles = makeStyles({\n root: {\n width: 250,\n },\n input: {\n width: 42,\n },\n});\n\nexport default function InputSlider() {\n const classes = useStyles();\n const [value, setValue] = React.useState(30);\n\n const handleSliderChange = (event, newValue) => {\n setValue(newValue);\n };\n\n const handleInputChange = (event) => {\n setValue(event.target.value === '' ? '' : Number(event.target.value));\n };\n\n const handleBlur = () => {\n if (value < 0) {\n setValue(0);\n } else if (value > 100) {\n setValue(100);\n }\n };\n\n return (\n <div className={classes.root}>\n <Typography id=\"input-slider\" gutterBottom>\n Volume\n </Typography>\n <Grid container spacing={2} alignItems=\"center\">\n <Grid item>\n <VolumeUp />\n </Grid>\n <Grid item xs>\n <Slider\n value={typeof value === 'number' ? value : 0}\n onChange={handleSliderChange}\n aria-labelledby=\"input-slider\"\n />\n </Grid>\n <Grid item>\n <Input\n className={classes.input}\n value={value}\n margin=\"dense\"\n onChange={handleInputChange}\n onBlur={handleBlur}\n inputProps={{\n step: 10,\n min: 0,\n max: 100,\n type: 'number',\n 'aria-labelledby': 'input-slider',\n }}\n />\n </Grid>\n </Grid>\n </div>\n );\n}\n"},2206:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return f}));t(0);var a=t(1072),r=t(11),l=t(1126),i=t(194),s=t(1097),o=t(1);const c=Object(a.a)((e=>({root:{width:300+2*e.spacing(3)},margin:{height:e.spacing(3)}})));function u(e){const{children:n,open:t,value:a}=e;return Object(o.jsx)(s.a,{open:t,enterTouchDelay:0,placement:"top",title:a,children:n})}const d="0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)",m=[{value:0},{value:20},{value:37},{value:100}],b=Object(r.a)({root:{color:"#3880ff",height:2,padding:"15px 0"},thumb:{height:28,width:28,backgroundColor:"#fff",boxShadow:d,marginTop:-14,marginLeft:-14,"&:focus, &:hover, &$active":{boxShadow:"0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)","@media (hover: none)":{boxShadow:d}}},active:{},valueLabel:{left:"calc(-50% + 12px)",top:-22,"& *":{background:"transparent",color:"#000"}},track:{height:2},rail:{height:2,opacity:.5,backgroundColor:"#bfbfbf"},mark:{backgroundColor:"#bfbfbf",height:8,width:1,marginTop:-3},markActive:{opacity:1,backgroundColor:"currentColor"}})(l.a),p=Object(r.a)({root:{color:"#52af77",height:8},thumb:{height:24,width:24,backgroundColor:"#fff",border:"2px solid currentColor",marginTop:-8,marginLeft:-12,"&:focus, &:hover, &$active":{boxShadow:"inherit"}},active:{},valueLabel:{left:"calc(-50% + 4px)"},track:{height:8,borderRadius:4},rail:{height:8,borderRadius:4}})(l.a),h=Object(r.a)({root:{color:"#3a8589",height:3,padding:"13px 0"},thumb:{height:27,width:27,backgroundColor:"#fff",border:"1px solid currentColor",marginTop:-12,marginLeft:-13,boxShadow:"#ebebeb 0 2px 2px","&:focus, &:hover, &$active":{boxShadow:"#ccc 0 2px 3px 1px"},"& .bar":{height:9,width:1,backgroundColor:"currentColor",marginLeft:1,marginRight:1}},active:{},track:{height:3},rail:{color:"#d8d8d8",opacity:1,height:3}})(l.a);function j(e){return Object(o.jsxs)("span",{...e,children:[Object(o.jsx)("span",{className:"bar"}),Object(o.jsx)("span",{className:"bar"}),Object(o.jsx)("span",{className:"bar"})]})}function f(){const e=c();return Object(o.jsxs)("div",{className:e.root,children:[Object(o.jsx)(i.a,{gutterBottom:!0,children:"iOS"}),Object(o.jsx)(b,{"aria-label":"ios slider",defaultValue:60,marks:m,valueLabelDisplay:"on"}),Object(o.jsx)("div",{className:e.margin}),Object(o.jsx)(i.a,{gutterBottom:!0,children:"pretto.fr"}),Object(o.jsx)(p,{valueLabelDisplay:"auto","aria-label":"pretto slider",defaultValue:20}),Object(o.jsx)("div",{className:e.margin}),Object(o.jsx)(i.a,{gutterBottom:!0,children:"Tooltip value label"}),Object(o.jsx)(l.a,{ValueLabelComponent:u,"aria-label":"custom thumb label",defaultValue:20}),Object(o.jsx)("div",{className:e.margin}),Object(o.jsx)(i.a,{gutterBottom:!0,children:"Airbnb"}),Object(o.jsx)(h,{ThumbComponent:j,getAriaLabel:e=>0===e?"Minimum price":"Maximum price",defaultValue:[20,40]})]})}},2207:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\nimport Slider from '@material-ui/core/Slider';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 300 + theme.spacing(3) * 2,\n },\n margin: {\n height: theme.spacing(3),\n },\n}));\n\nfunction ValueLabelComponent(props) {\n const { children, open, value } = props;\n\n return (\n <Tooltip open={open} enterTouchDelay={0} placement=\"top\" title={value}>\n {children}\n </Tooltip>\n );\n}\n\nValueLabelComponent.propTypes = {\n children: PropTypes.element.isRequired,\n open: PropTypes.bool.isRequired,\n value: PropTypes.number.isRequired,\n};\n\nconst iOSBoxShadow =\n '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)';\n\nconst marks = [\n {\n value: 0,\n },\n {\n value: 20,\n },\n {\n value: 37,\n },\n {\n value: 100,\n },\n];\n\nconst IOSSlider = withStyles({\n root: {\n color: '#3880ff',\n height: 2,\n padding: '15px 0',\n },\n thumb: {\n height: 28,\n width: 28,\n backgroundColor: '#fff',\n boxShadow: iOSBoxShadow,\n marginTop: -14,\n marginLeft: -14,\n '&:focus, &:hover, &$active': {\n boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n boxShadow: iOSBoxShadow,\n },\n },\n },\n active: {},\n valueLabel: {\n left: 'calc(-50% + 12px)',\n top: -22,\n '& *': {\n background: 'transparent',\n color: '#000',\n },\n },\n track: {\n height: 2,\n },\n rail: {\n height: 2,\n opacity: 0.5,\n backgroundColor: '#bfbfbf',\n },\n mark: {\n backgroundColor: '#bfbfbf',\n height: 8,\n width: 1,\n marginTop: -3,\n },\n markActive: {\n opacity: 1,\n backgroundColor: 'currentColor',\n },\n})(Slider);\n\nconst PrettoSlider = withStyles({\n root: {\n color: '#52af77',\n height: 8,\n },\n thumb: {\n height: 24,\n width: 24,\n backgroundColor: '#fff',\n border: '2px solid currentColor',\n marginTop: -8,\n marginLeft: -12,\n '&:focus, &:hover, &$active': {\n boxShadow: 'inherit',\n },\n },\n active: {},\n valueLabel: {\n left: 'calc(-50% + 4px)',\n },\n track: {\n height: 8,\n borderRadius: 4,\n },\n rail: {\n height: 8,\n borderRadius: 4,\n },\n})(Slider);\n\nconst AirbnbSlider = withStyles({\n root: {\n color: '#3a8589',\n height: 3,\n padding: '13px 0',\n },\n thumb: {\n height: 27,\n width: 27,\n backgroundColor: '#fff',\n border: '1px solid currentColor',\n marginTop: -12,\n marginLeft: -13,\n boxShadow: '#ebebeb 0 2px 2px',\n '&:focus, &:hover, &$active': {\n boxShadow: '#ccc 0 2px 3px 1px',\n },\n '& .bar': {\n // display: inline-block !important;\n height: 9,\n width: 1,\n backgroundColor: 'currentColor',\n marginLeft: 1,\n marginRight: 1,\n },\n },\n active: {},\n track: {\n height: 3,\n },\n rail: {\n color: '#d8d8d8',\n opacity: 1,\n height: 3,\n },\n})(Slider);\n\nfunction AirbnbThumbComponent(props) {\n return (\n <span {...props}>\n <span className=\"bar\" />\n <span className=\"bar\" />\n <span className=\"bar\" />\n </span>\n );\n}\n\nexport default function CustomizedSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography gutterBottom>iOS</Typography>\n <IOSSlider aria-label=\"ios slider\" defaultValue={60} marks={marks} valueLabelDisplay=\"on\" />\n <div className={classes.margin} />\n <Typography gutterBottom>pretto.fr</Typography>\n <PrettoSlider valueLabelDisplay=\"auto\" aria-label=\"pretto slider\" defaultValue={20} />\n <div className={classes.margin} />\n <Typography gutterBottom>Tooltip value label</Typography>\n <Slider\n ValueLabelComponent={ValueLabelComponent}\n aria-label=\"custom thumb label\"\n defaultValue={20}\n />\n <div className={classes.margin} />\n <Typography gutterBottom>Airbnb</Typography>\n <AirbnbSlider\n ThumbComponent={AirbnbThumbComponent}\n getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')}\n defaultValue={[20, 40]}\n />\n </div>\n );\n}\n"},2208:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return m}));var a=t(0),r=t.n(a),l=t(1072),i=t(194),s=t(1126),o=t(1);const c=Object(l.a)({root:{height:300}});function u(e){return"".concat(e,"\xb0C")}const d=[{value:0,label:"0\xb0C"},{value:20,label:"20\xb0C"},{value:37,label:"37\xb0C"},{value:100,label:"100\xb0C"}];function m(){const e=c();return Object(o.jsxs)(r.a.Fragment,{children:[Object(o.jsx)(i.a,{id:"vertical-slider",gutterBottom:!0,children:"Temperature"}),Object(o.jsxs)("div",{className:e.root,children:[Object(o.jsx)(s.a,{orientation:"vertical",getAriaValueText:u,defaultValue:30,"aria-labelledby":"vertical-slider"}),Object(o.jsx)(s.a,{disabled:!0,orientation:"vertical",getAriaValueText:u,defaultValue:30,"aria-labelledby":"vertical-slider"}),Object(o.jsx)(s.a,{orientation:"vertical",defaultValue:[20,37],"aria-labelledby":"vertical-slider",getAriaValueText:u,marks:d})]})]})}},2209:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles({\n root: {\n height: 300,\n },\n});\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nconst marks = [\n {\n value: 0,\n label: '0\xb0C',\n },\n {\n value: 20,\n label: '20\xb0C',\n },\n {\n value: 37,\n label: '37\xb0C',\n },\n {\n value: 100,\n label: '100\xb0C',\n },\n];\n\nexport default function VerticalSlider() {\n const classes = useStyles();\n\n return (\n <React.Fragment>\n <Typography id=\"vertical-slider\" gutterBottom>\n Temperature\n </Typography>\n <div className={classes.root}>\n <Slider\n orientation=\"vertical\"\n getAriaValueText={valuetext}\n defaultValue={30}\n aria-labelledby=\"vertical-slider\"\n />\n <Slider\n disabled\n orientation=\"vertical\"\n getAriaValueText={valuetext}\n defaultValue={30}\n aria-labelledby=\"vertical-slider\"\n />\n <Slider\n orientation=\"vertical\"\n defaultValue={[20, 37]}\n aria-labelledby=\"vertical-slider\"\n getAriaValueText={valuetext}\n marks={marks}\n />\n </div>\n </React.Fragment>\n );\n}\n"},2210:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)((e=>({root:{width:250},margin:{height:e.spacing(3)}}))),o=[{value:0,label:"0\xb0C"},{value:20,label:"20\xb0C"},{value:37,label:"37\xb0C"},{value:100,label:"100\xb0C"}];function c(e){return"".concat(e,"\xb0C")}function u(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"track-false-slider",gutterBottom:!0,children:"Removed track"}),Object(i.jsx)(l.a,{track:!1,"aria-labelledby":"track-false-slider",getAriaValueText:c,defaultValue:30,marks:o}),Object(i.jsx)("div",{className:e.margin}),Object(i.jsx)(r.a,{id:"track-false-range-slider",gutterBottom:!0,children:"Removed track range slider"}),Object(i.jsx)(l.a,{track:!1,"aria-labelledby":"track-false-range-slider",getAriaValueText:c,defaultValue:[20,37,50],marks:o})]})}},2211:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 250,\n },\n margin: {\n height: theme.spacing(3),\n },\n}));\n\nconst marks = [\n {\n value: 0,\n label: '0\xb0C',\n },\n {\n value: 20,\n label: '20\xb0C',\n },\n {\n value: 37,\n label: '37\xb0C',\n },\n {\n value: 100,\n label: '100\xb0C',\n },\n];\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function TrackFalseSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id=\"track-false-slider\" gutterBottom>\n Removed track\n </Typography>\n <Slider\n track={false}\n aria-labelledby=\"track-false-slider\"\n getAriaValueText={valuetext}\n defaultValue={30}\n marks={marks}\n />\n <div className={classes.margin} />\n <Typography id=\"track-false-range-slider\" gutterBottom>\n Removed track range slider\n </Typography>\n <Slider\n track={false}\n aria-labelledby=\"track-false-range-slider\"\n getAriaValueText={valuetext}\n defaultValue={[20, 37, 50]}\n marks={marks}\n />\n </div>\n );\n}\n"},2212:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var a=t(1072),r=t(194),l=t(1126),i=t(1);const s=Object(a.a)((e=>({root:{width:250},margin:{height:e.spacing(3)}}))),o=[{value:0,label:"0\xb0C"},{value:20,label:"20\xb0C"},{value:37,label:"37\xb0C"},{value:100,label:"100\xb0C"}];function c(e){return"".concat(e,"\xb0C")}function u(){const e=s();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(r.a,{id:"track-inverted-slider",gutterBottom:!0,children:"Inverted track"}),Object(i.jsx)(l.a,{track:"inverted","aria-labelledby":"track-inverted-slider",getAriaValueText:c,defaultValue:30,marks:o}),Object(i.jsx)("div",{className:e.margin}),Object(i.jsx)(r.a,{id:"track-inverted-range-slider",gutterBottom:!0,children:"Inverted track range"}),Object(i.jsx)(l.a,{track:"inverted","aria-labelledby":"track-inverted-range-slider",getAriaValueText:c,defaultValue:[20,37],marks:o})]})}},2213:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 250,\n },\n margin: {\n height: theme.spacing(3),\n },\n}));\n\nconst marks = [\n {\n value: 0,\n label: '0\xb0C',\n },\n {\n value: 20,\n label: '20\xb0C',\n },\n {\n value: 37,\n label: '37\xb0C',\n },\n {\n value: 100,\n label: '100\xb0C',\n },\n];\n\nfunction valuetext(value) {\n return `${value}\xb0C`;\n}\n\nexport default function TrackInvertedSlider() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography id=\"track-inverted-slider\" gutterBottom>\n Inverted track\n </Typography>\n <Slider\n track=\"inverted\"\n aria-labelledby=\"track-inverted-slider\"\n getAriaValueText={valuetext}\n defaultValue={30}\n marks={marks}\n />\n <div className={classes.margin} />\n <Typography id=\"track-inverted-range-slider\" gutterBottom>\n Inverted track range\n </Typography>\n <Slider\n track=\"inverted\"\n aria-labelledby=\"track-inverted-range-slider\"\n getAriaValueText={valuetext}\n defaultValue={[20, 37]}\n marks={marks}\n />\n </div>\n );\n}\n"},2214:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));var a=t(0),r=t.n(a),l=t(194),i=t(1126),s=t(1);function o(e){const[n,t]=e.toExponential().split("e").map((e=>Number(e)));return"".concat(Math.round(n),"e^").concat(t)}function c(){const[e,n]=r.a.useState(1);return Object(s.jsxs)("div",{children:[Object(s.jsx)(l.a,{id:"non-linear-slider",gutterBottom:!0,children:"Temperature range"}),Object(s.jsx)(i.a,{value:e,min:0,step:.1,max:6,scale:e=>e**10,getAriaValueText:o,valueLabelFormat:o,onChange:(e,t)=>{n(t)},valueLabelDisplay:"auto","aria-labelledby":"non-linear-slider"})]})}},2215:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport Slider from '@material-ui/core/Slider';\n\nfunction valueLabelFormat(value) {\n const [coefficient, exponent] = value\n .toExponential()\n .split('e')\n .map((item) => Number(item));\n return `${Math.round(coefficient)}e^${exponent}`;\n}\n\nexport default function NonLinearSlider() {\n const [value, setValue] = React.useState(1);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div>\n <Typography id=\"non-linear-slider\" gutterBottom>\n Temperature range\n </Typography>\n <Slider\n value={value}\n min={0}\n step={0.1}\n max={6}\n scale={(x) => x ** 10}\n getAriaValueText={valueLabelFormat}\n valueLabelFormat={valueLabelFormat}\n onChange={handleChange}\n valueLabelDisplay=\"auto\"\n aria-labelledby=\"non-linear-slider\"\n />\n </div>\n );\n}\n"},2601:function(e,n,t){"use strict";t.r(n);var a=t(1130),r=t(1098),l=t(1090),i=t(194),s=t(1072),o=t(1);const c=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return c(),Object(o.jsxs)(o.Fragment,{children:[Object(o.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(o.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/slider",target:"_blank",role:"button",children:[Object(o.jsx)(l.a,{children:"link"}),Object(o.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(o.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Slider"}),Object(o.jsx)(i.a,{className:"description",children:"Sliders allow users to make selections from a range of values."}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(o.jsx)("a",{href:"https://material.io/design/components/sliders.html",children:"Sliders"})," reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters."]}),Object(o.jsx)("ul",{children:Object(o.jsxs)("li",{children:["\ud83d\udce6 ",Object(o.jsx)("a",{href:"/size-snapshot",children:"22 kB gzipped"})," (but only +8 kB when used together with other Material-UI components)."]})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Continuous sliders"}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:"Continuous sliders allow users to select a value along a subjective range."}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2189).default,raw:t(2191)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Discrete sliders"}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:"Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos:"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["You can generate a mark for each step with ",Object(o.jsx)("code",{children:"marks={true}"}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2192).default,raw:t(2193)})}),Object(o.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Small steps"}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:"You can change the default step increment."}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2194).default,raw:t(2195)})}),Object(o.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Custom marks"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["You can have custom marks by providing a rich array to the ",Object(o.jsx)("code",{children:"marks"})," prop."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2196).default,raw:t(2197)})}),Object(o.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Restricted values"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["You can restrict the selectable values to those provided with the ",Object(o.jsx)("code",{children:"marks"})," prop with ",Object(o.jsx)("code",{children:"step={null}"}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2198).default,raw:t(2199)})}),Object(o.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Label always visible"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["You can force the thumb label to be always visible with ",Object(o.jsx)("code",{children:'valueLabelDisplay="on"'}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2200).default,raw:t(2201)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Range slider"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["The slider can be used to set the start and end of a range by supplying an array of values to the ",Object(o.jsx)("code",{children:"value"})," prop."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2202).default,raw:t(2203)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Slider with input field"}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:"In this example an input allows a discrete value to be set."}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2204).default,raw:t(2205)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized sliders"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["Here are some examples of customizing the component. You can learn more about this in the"," ",Object(o.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2206).default,raw:t(2207)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Vertical sliders"}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2208).default,raw:t(2209)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Track"}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:"The track shows the range available for user selection."}),Object(o.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Removed track"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["The track can be turned off with ",Object(o.jsx)("code",{children:"track={false}"}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2210).default,raw:t(2211)})}),Object(o.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Inverted track"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["The track can be inverted with ",Object(o.jsx)("code",{children:'track="inverted"'}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2212).default,raw:t(2213)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Non-linear scale"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["You can use the ",Object(o.jsx)("code",{children:"scale"})," prop to represent the ",Object(o.jsx)("code",{children:"value"})," on a different scale. For instance, in the following demo, the value ",Object(o.jsx)("em",{children:"x"})," represents the power of"," ",Object(o.jsx)("em",{children:"10^x"}),"."]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2214).default,raw:t(2215)})}),Object(o.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(o.jsxs)(i.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(o.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#slider",children:"https://www.w3.org/TR/wai-aria-practices/#slider"}),")"]}),Object(o.jsx)(i.a,{className:"mb-16",component:"div",children:"The component handles most of the work necessary to make it accessible. However, you need to make sure that:"}),Object(o.jsxs)("ul",{children:[Object(o.jsxs)("li",{children:["Each thumb has a user-friendly label (",Object(o.jsx)("code",{children:"aria-label"}),","," ",Object(o.jsx)("code",{children:"aria-labelledby"})," or ",Object(o.jsx)("code",{children:"getAriaLabel"})," prop)."]}),Object(o.jsxs)("li",{children:["Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the"," ",Object(o.jsx)("code",{children:"getAriaValueText"})," or ",Object(o.jsx)("code",{children:"aria-valuetext"})," prop."]})]})]})}}}]);
Zerion Mini Shell 1.0