refactor: Bootstrap to AntD - Slider (#13989)

superset-frontend/src/components/Slider/Slider.stories.tsx

@@ -17,14 +17,41 @@
  * under the License.
  */
 import React from 'react';
-import ReactBootstrapSlider from 'react-bootstrap-slider';
-import 'bootstrap-slider/dist/css/bootstrap-slider.min.css';
-import './BootstrapSliderWrapper.less';
+import Slider, { SliderSingleProps } from '.';
 
-export default function BootstrapSliderWrapper(props) {
-  return (
-    <span className="BootstrapSliderWrapper">
-      <ReactBootstrapSlider {...props} />
-    </span>
-  );
-}
+export default {
+  title: 'Slider',
+  component: Slider,
+};
+
+export const InteractiveSlider = (args: SliderSingleProps) => (
+  <Slider {...args} style={{ width: 400, height: 400 }} />
+);
+
+InteractiveSlider.args = {
+  min: 0,
+  max: 100,
+  defaultValue: 70,
+  step: 1,
+};
+
+InteractiveSlider.argTypes = {
+  onChange: { action: 'onChange' },
+  disabled: {
+    control: { type: 'boolean' },
+  },
+  reverse: {
+    control: { type: 'boolean' },
+  },
+  vertical: {
+    control: { type: 'boolean' },
+  },
+};
+
+InteractiveSlider.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};

superset-frontend/src/components/Slider/index.tsx

@@ -16,12 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import '../../../stylesheets/less/variables.less';
+import React from 'react';
+import AntDSlider, {
+  SliderSingleProps,
+  SliderRangeProps,
+} from 'antd/lib/slider';
 
-.BootstrapSliderWrapper .slider-selection {
-  background: @gray-bg;
-}
+export { SliderSingleProps, SliderRangeProps };
 
-.BootstrapSliderWrapper .slider-handle {
-  background: @gray-light;
+export default function Slider(props: SliderSingleProps | SliderRangeProps) {
+  return <AntDSlider {...props} css={{ marginLeft: 0, marginRight: 0 }} />;
 }

superset-frontend/src/explore/components/controls/SliderControl.jsx

@@ -18,8 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import BootstrapSliderWrapper from 'src/components/BootstrapSliderWrapper';
+import Slider from 'src/components/Slider';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
 const propTypes = {
@@ -32,17 +31,11 @@ const defaultProps = {
 };
 
 export default function SliderControl(props) {
-  // This wouldn't be necessary but might as well
   return (
-    <div>
+    <>
       <ControlHeader {...props} />
-      <BootstrapSliderWrapper
-        {...props}
-        change={obj => {
-          props.onChange(obj.target.value);
-        }}
-      />
-    </div>
+      <Slider {...props} defaultValue={props.default} />
+    </>
   );
 }