feat: range slider CU-2e09ymt (#219)

Author: snqb

src/components/range-slider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './range-slider';
+export type { Props as RangeSliderProps } from './range-slider';

src/components/range-slider/range-slider.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { Box } from 'rebass';
+import RangeSlider, { Props } from './range-slider';
+import Value from '../typography/value';
+import Divider from '../divider';
+import Labeling from '../typography/labeling';
+
+export default {
+  title: 'Quartz/RangeSlider',
+  component: RangeSlider,
+} as Meta;
+
+export const DefaultSlider: Story<Pick<Props, 'label' | 'step' | 'range'>> = (
+  props,
+) => {
+  const [value, setValue] = useState([2, 4]);
+
+  return (
+    <Box width="700px">
+      <RangeSlider value={value} onChange={setValue} {...props} />
+      <Divider />
+      <Labeling>Current value:</Labeling>
+      <Value>[{value.join(', ')}]</Value>
+    </Box>
+  );
+};
+
+DefaultSlider.args = {
+  label: 'CPU cores',
+  step: 1,
+  range: [0, 10],
+};
+
+export const WithCustomDisplayValue: Story<
+  Pick<Props, 'label' | 'step' | 'range' | 'formatDisplayValue'>
+> = (props) => {
+  const [value, setValue] = useState([128, 256]);
+
+  return (
+    <Box width="700px">
+      <RangeSlider value={value} onChange={setValue} {...props} />
+      <Divider />
+      <Labeling>Current value:</Labeling>
+      <Value>[{value.join(', ')}]</Value>
+    </Box>
+  );
+};
+
+WithCustomDisplayValue.args = {
+  label: 'RAM',
+  step: 128,
+  range: [0, 1024],
+  formatDisplayValue: (value) => `${value} MB`,
+};

src/components/range-slider/range-slider.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Range as RCRangeSlider } from 'rc-slider';
+import { FlexProps, Flex } from 'rebass';
+import { useTheme } from 'emotion-theming';
+import { ITheme } from '../../theme/types';
+import Labeling from '../typography/labeling';
+import Value from '../typography/value';
+
+export interface Props extends Omit<FlexProps, 'value' | 'css' | 'onChange'> {
+  label: string;
+  value: number[];
+  range: number[];
+  step: number;
+  disabled?: boolean;
+  onChange: (value: number[]) => void;
+  formatDisplayValue?: (value: number) => string;
+}
+
+const RangeSlider = ({
+  label,
+  defaultValue,
+  value,
+  onChange,
+  range,
+  step,
+  disabled,
+  formatDisplayValue = (displayValue) => displayValue.toString(),
+  ...flexProps
+}: Props) => {
+  const theme = useTheme<ITheme>();
+
+  return (
+    <Flex flexDirection="column" {...flexProps}>
+      <Flex alignItems="center" mb="10px">
+        <Labeling bold mr="8px">
+          {label}
+        </Labeling>
+        <Flex
+          backgroundColor="primaryShade2"
+          px="4px"
+          py="2px"
+          sx={{ borderRadius: '2px' }}
+        >
+          <Value color="primary">{value.map(formatDisplayValue).join('-')}</Value>
+        </Flex>
+      </Flex>
+      <RCRangeSlider
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        min={range[0]}
+        max={range[1]}
+        step={step}
+        railStyle={{
+          backgroundColor: theme.colors.grayShade2,
+        }}
+        trackStyle={[
+          {
+            backgroundColor: theme.colors.primary,
+          },
+        ]}
+        handleStyle={[
+          {
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 5px ${theme.colors.primary}`,
+          },
+        ]}
+      />
+    </Flex>
+  );
+};
+
+export default RangeSlider;

src/components/slider/slider.stories.tsx

@@ -44,3 +44,4 @@ WithCustomDisplayValue.args = {
   range: [0, 1024],
   formatDisplayValue: (value) => `${value} MB`,
 };
+

src/index.ts

@@ -54,6 +54,7 @@ import { SymbolMode } from './components/symbol/types';
 import Collapse from './components/collapse';
 import PerformanceCard from './components/performance-card';
 import Slider from './components/slider';
+import RangeSlider from './components/range-slider';
 import ExpandViewer from './components/expand-viewer';
 
 // Popups
@@ -186,6 +187,7 @@ export {
   Divider,
   PerformanceCard,
   Slider,
+  RangeSlider,
   ExpandViewer,
   // Popups
   usePopup,
@@ -261,6 +263,7 @@ export type ITheme = import('./theme/types').ITheme;
 export type TooltipProps = import('./components/tooltip').TooltipProps;
 export type BadgeProps = import('./components/badges').BadgeProps;
 export type SliderProps = import('./components/slider').SliderProps;
+export type RangeSliderProps = import('./components/range-slider').RangeSliderProps;
 export type EditableSelectProps =
   import('./components/editableSelect').EditableSelectProps;
 export type Select2Props = import('./components/select2').SelectProps;