fix(Slider,RangeSlider): fix touch event not working (#3653)

* fix(Slider,RangeSlider): fix touch event not working * docs(Slider): update vertical example
rsuite · Mar 1, 2024 · 3d57ebc · 3d57ebc
1 parent f589257
commit 3d57ebc
Show file tree

Hide file tree

Showing 15 changed files with 461 additions and 425 deletions.
diff --git a/docs/pages/components/slider/fragments/value.md b/docs/pages/components/slider/fragments/value.md
@@ -7,7 +7,7 @@ function Example1() {
   const [value, setValue] = React.useState(0);
   return (
     <Row>
-      <Col md={10}>
+      <Col md={10} xs={12}>
         <Slider
           progress
           style={{ marginTop: 16 }}
@@ -17,7 +17,7 @@ function Example1() {
           }}
         />
       </Col>
-      <Col md={4}>
+      <Col md={4} xs={12}>
         <InputNumber
           min={0}
           max={100}
@@ -35,7 +35,7 @@ function Example2() {
   const [value, setValue] = React.useState([10, 50]);
   return (
     <Row>
-      <Col md={10}>
+      <Col md={10} xs={12}>
         <RangeSlider
           progress
           style={{ marginTop: 16 }}
@@ -45,7 +45,7 @@ function Example2() {
           }}
         />
       </Col>
-      <Col md={8}>
+      <Col md={8} xs={12}>
         <InputGroup>
           <InputNumber
             min={0}
@@ -80,10 +80,11 @@ function Example2() {
 
 function Example3() {
   const [value, setValue] = React.useState([10, 100]);
+
   return (
     <Row>
       <p>Fixed end value</p>
-      <Col md={10}>
+      <Col md={10} xs={12}>
         <RangeSlider
           progress
           style={{ marginTop: 16 }}
@@ -93,7 +94,7 @@ function Example3() {
           }}
         />
       </Col>
-      <Col md={8}>
+      <Col md={8} xs={12}>
         <InputGroup>
           <InputNumber
             min={0}

diff --git a/docs/pages/components/slider/fragments/vertical.md b/docs/pages/components/slider/fragments/vertical.md
@@ -7,33 +7,33 @@ const App = () => {
   const style = { height: 400 };
   return (
     <Row>
-      <Col md={2}>
+      <Col md={2} xs={4}>
         <div style={style}>
           <Slider defaultValue={50} vertical />
         </div>
       </Col>
 
-      <Col md={2}>
+      <Col md={2} xs={4}>
         <div style={style}>
           <Slider defaultValue={50} vertical progress />
         </div>
       </Col>
-      <Col md={2}>
+      <Col md={2} xs={4}>
         <div style={style}>
           <RangeSlider defaultValue={[10, 50]} vertical />
         </div>
       </Col>
-      <Col md={2}>
+      <Col md={2} xs={4}>
         <div style={style}>
           <Slider defaultValue={50} min={0} step={10} max={100} graduated vertical progress />
         </div>
       </Col>
-      <Col md={2}>
+      <Col md={2} xs={4}>
         <div style={style}>
           <RangeSlider min={0} step={10} max={100} defaultValue={[10, 50]} vertical graduated />
         </div>
       </Col>
-      <Col md={2}>
+      <Col md={2} xs={4}>
         <div style={style}>
           <Slider
             defaultValue={50}