wix-style-react/src/Slider/docs/Slider.examples.js

wix-style-react

export const _range = `
<Slider min={1} max={20} value={3} />;
`;

export const _values = `
<StorybookComponents.Stack flexDirection="column">
  <Slider min={0} max={50} value={10} />
  <Slider min={0} max={50} value={[10, 25]} />
</StorybookComponents.Stack>;
`;

export const _startPoint = `
<StorybookComponents.Stack flexDirection="column">
  <Slider startPoint={0} min={0} max={50} />
  <Slider startPoint={0} min={-25} max={25} />
</StorybookComponents.Stack>;
`;

export const _marks = `
<StorybookComponents.Stack flexDirection="column">
  <Slider min={0} max={50} displayMarks={true} />
  <Slider min={0} max={50} displayMarks={false} />
</StorybookComponents.Stack>;
`;

export const _customMarks = `
() => {
  const marks = {
    0: '$20',
    1: '$40',
    2: '$80',
    3: '$160',
    4: '$300',
    5: '$500',
  };

  return <Slider marks={marks} min={0} max={5} />;
};
`;

export const _step = `
<Slider min={0} max={100} step={10} />;
`;

export const _disabled = `
<Slider min={1} max={10} disabled />;
`;

export const _handles = `
() => {
  const [firstValue, setFirstValue] = React.useState([10, 25]);
  const [secondValue, setSecondValue] = React.useState([15, 30]);

  return (
    <StorybookComponents.Stack flexDirection="column">
      Crossing handles
      <Slider onChange={setFirstValue} min={0} max={50} value={firstValue} />
      Pushable handles
      <Slider
        onChange={setSecondValue}
        min={0}
        max={50}
        value={secondValue}
        pushable={5}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _editableSlider = `
() => {
  const [value, setValue] = React.useState(50);

  return (
    <Layout>
      <Cell>
        <FormField label="Opacity">
          <Box gap="12px">
            <Box display="block" width="100%">
              <Slider
                onChange={setValue}
                min={0}
                max={100}
                value={value}
                displayMarks={false}
              />
            </Box>
            <Box width="60px">
              <Input value={value} onChange={e => setValue(e.target.value)} />
            </Box>
          </Box>
        </FormField>
      </Cell>
    </Layout>
  );
};
`;

export const _composer = `
() => {
  renderSlider = ({ icon, text, initialValue }) => {
    const [value, setValue] = React.useState(initialValue);
    return (
      <FormField
        label=<Box verticalAlign="middle" gap="SP1">
          {icon}
          <Text>{text}</Text>
        </Box>
      >
        <Slider
          onChange={setValue}
          startPoint={0}
          min={-50}
          max={50}
          value={value}
          displayMarks={false}
        />
      </FormField>
    );
  };

  return (
    <SidePanel>
      <SidePanel.Header title="Adjust" />
      <SidePanel.Content>
        <Layout>
          <Cell>
            <Text size="small">Light & Color</Text>
          </Cell>
          <Cell>
            {renderSlider({
              icon: <Icons.BrightnessSmall />,
              text: 'Brightness',
              initialValue: -30,
            })}
          </Cell>
          <Cell>
            {renderSlider({
              icon: <Icons.ContrastSmall />,
              text: 'Contrast',
              initialValue: 25,
            })}
          </Cell>
          <Cell>
            {renderSlider({
              icon: <Icons.HighlightsSmall />,
              text: 'Highlights',
              initialValue: 25,
            })}
          </Cell>
          <Cell>
            {renderSlider({
              icon: <Icons.ShadowsSmall />,
              text: 'Shadows',
              initialValue: 0,
            })}
          </Cell>
        </Layout>
      </SidePanel.Content>
    </SidePanel>
  );
};
`;

export const _form = `
() => {
  const [value, setValue] = React.useState({ min: 4, max: 12 });
  return (
    <Card>
      <Card.Header title="Party Size" />
      <Card.Divider />
      <Card.Content>
        <Layout>
          <Cell span={3}>
            <Box gap="12px">
              <FormField label="Min">
                <Input
                  value={value.min}
                  onChange={e => setValue({ ...value, min: e.target.value })}
                />
              </FormField>
              <FormField label="Max">
                <Input
                  value={value.max}
                  onChange={e => setValue({ ...value, max: e.target.value })}
                />
              </FormField>
            </Box>
          </Cell>
          <Cell span={9}>
            <FormField>
              <Slider
                onChange={val => setValue({ min: val[0], max: val[1] })}
                min={1}
                max={20}
                value={[value.min, value.max]}
              />
            </FormField>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;