2938667f.ef9cd53e.js

"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[7120],{2347:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var o=t(85893),r=t(11151);const s="import Form from 'react-bootstrap/Form';\n\nfunction RangeExample() {\n  return (\n    <>\n      <Form.Label>Range</Form.Label>\n      <Form.Range />\n    </>\n  );\n}\n\nexport default RangeExample;\n",i={title:"Range",description:"Use our custom range inputs for consistent cross-browser styling and built-in customization.",sidebar_position:6},a=void 0,c={id:"forms/range",title:"Range",description:"Use our custom range inputs for consistent cross-browser styling and built-in customization.",source:"@site/docs/forms/range.mdx",sourceDirName:"forms",slug:"/forms/range",permalink:"/docs/forms/range",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"Range",description:"Use our custom range inputs for consistent cross-browser styling and built-in customization.",sidebar_position:6},sidebar:"sidebar",previous:{title:"Checks and radios",permalink:"/docs/forms/checks-radios"},next:{title:"Input Group",permalink:"/docs/forms/input-group"}},l={},u=[{value:"Overview",id:"overview",level:2},{value:"API",id:"api",level:2},{value:"FormRange",id:"formrange",level:3}];function d(e){const n={code:"code",h2:"h2",h3:"h3",p:"p",...(0,r.a)(),...e.components},{CodeBlock:t,PropsTable:i}=n;return t||m("CodeBlock",!0),i||m("PropsTable",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,o.jsxs)(n.p,{children:["Create custom ",(0,o.jsx)(n.code,{children:'<input type="range">'})," controls with ",(0,o.jsx)(n.code,{children:"<FormRange>"}),". The track\n(the background) and thumb (the value) are both styled to appear the same\nacross browsers. As only Firefox supports \u201cfilling\u201d their track from the left\nor right of the thumb as a means to visually indicate progress, we do not\ncurrently support it."]}),"\n",(0,o.jsx)(t,{language:"jsx",live:!0,children:s}),"\n",(0,o.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,o.jsx)(n.h3,{id:"formrange",children:"FormRange"}),"\n",(0,o.jsx)(i,{name:"FormRange"})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}function m(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var o=t(67294);const r={},s=o.createContext(r);function i(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]);