SliderField

import { SliderField } from '@aws-amplify/ui-react';

export const DefaultSliderFieldExample = () => {
  return <SliderField label="Default slider" />;
};

import { SliderField } from '@aws-amplify/ui-react';
import * as React from 'react';

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

  return (
    <SliderField label="Controlled slider" value={value} onChange={setValue} />
  );
};

import { SliderField } from '@aws-amplify/ui-react';

export const SliderFieldBasicsExample = () => {
  return (
    <SliderField
      label="Select your favorite odd number between 1 and 9"
      min={1}
      max={9}
      step={2}
      defaultValue={5}
    />
  );
};

import { SliderField, Flex, Button } from '@aws-amplify/ui-react';
import * as React from 'react';

export const SliderFieldAccessibilityExample = () => {
  const [labelHidden, setLabelHidden] = React.useState(false);
  const [isValueHidden, setIsValueHidden] = React.useState(false);

  return (
    <>
      <SliderField
        label="Accessibility demo"
        labelHidden={labelHidden}
        isValueHidden={isValueHidden}
        defaultValue={50}
      />
      <Flex>
        <Button onClick={() => setLabelHidden(!labelHidden)}>
          {labelHidden ? 'Show label' : 'Hide label'}
        </Button>
        <Button onClick={() => setIsValueHidden(!isValueHidden)}>
          {isValueHidden ? 'Show value' : 'Hide value'}
        </Button>
      </Flex>
    </>
  );
};

import { SliderField, Text } from '@aws-amplify/ui-react';
import * as React from 'react';

const userFeedback = [
  'Strongly disagree',
  'Disagree',
  'Neutral',
  'Agree',
  'Strongly agree',
];

export const SliderFieldAriaExample = () => {
  const [index, setIndex] = React.useState(2);

  return (
    <>
      <SliderField
        ariaValuetext={userFeedback[index]}
        label="I tend to be more introverted."
        value={index}
        onChange={setIndex}
        max={4}
        isValueHidden
      />
      <Text>{userFeedback[index]}</Text>
    </>
  );
};

import { SliderField, Button, Flex } from '@aws-amplify/ui-react';
import * as React from 'react';

export const SliderFieldFormExample = () => {
  const [value, setValue] = React.useState(5);
  const [isDisabled, setIsDisabled] = React.useState(false);

  const handleOnSubmit = (event) => {
    event.preventDefault();
    alert(`Waterslide enjoyment: ${event.target.waterslides.value}`);
  };

  return (
    <form onSubmit={handleOnSubmit}>
      <SliderField
        label="On a scale from 1-10, how much do you enjoy waterslides?"
        name="waterslides"
        min={1}
        max={10}
        value={value}
        onChange={setValue}
        isDisabled={isDisabled}
      />
      <Flex>
        <Button type="submit">Submit</Button>
        <Button onClick={() => setIsDisabled(!isDisabled)}>
          {isDisabled ? 'Enable SelectField' : 'Disable SelectField'}
        </Button>
      </Flex>
    </form>
  );
};

import { SliderField } from '@aws-amplify/ui-react';

export const SliderFieldOrientationExample = () => {
  return (
    <SliderField
      label="How tall is your cat (in inches)?"
      orientation="vertical"
      min={3}
      max={20}
      defaultValue={9}
    />
  );
};

import { SliderField, Icon } from '@aws-amplify/ui-react';

export const SliderFieldIconsExample = () => {
  return (
    <SliderField
      label="Volume slider"
      outerStartComponent={
        <Icon
          ariaLabel="volume-down-icon"
          pathData="M16 7.97V16.02C17.48 15.29 18.5 13.77 18.5 12C18.5 10.23 17.48 8.71 16 7.97ZM5 9V15H9L14 20V4L9 9H5ZM12 8.83V15.17L9.83 13H7V11H9.83L12 8.83Z"
        />
      }
      outerEndComponent={
        <Icon
          ariaLabel="volume-up-icon"
          pathData="M3 8.99998V15H7L12 20V3.99998L7 8.99998H3ZM10 8.82998V15.17L7.83 13H5V11H7.83L10 8.82998ZM16.5 12C16.5 10.23 15.48 8.70998 14 7.96998V16.02C15.48 15.29 16.5 13.77 16.5 12ZM14 3.22998V5.28998C16.89 6.14998 19 8.82998 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.71998 18.01 4.13998 14 3.22998V3.22998Z"
        />
      }
      defaultValue={50}
      size="large"
    />
  );
};

import { SliderField } from '@aws-amplify/ui-react';

export const SliderFieldFormatValueExample = () => {
  const formatValue = (value: number) => {
    return `${value}%`;
  };
  return (
    <SliderField
      label="SliderField with formatted value"
      defaultValue={50}
      formatValue={formatValue}
    />
  );
};

import { SliderField } from '@aws-amplify/ui-react';
import * as React from 'react';

export const SliderFieldValidationExample = () => {
  const [age, setAge] = React.useState(13);

  return (
    <SliderField
      label="Select your age"
      value={age}
      onChange={setAge}
      hasError={age < 18}
      errorMessage="You must be at least 18 years old."
    />
  );
};

import { SliderField, useTheme } from '@aws-amplify/ui-react';

export const SliderFieldStylePropsExample = () => {
  const { tokens } = useTheme();

  return (
    <SliderField
      label="Style Props Slider"
      filledTrackColor={tokens.colors.green[80]}
      emptyTrackColor={tokens.colors.green[20]}
      thumbColor={tokens.colors.red[60]}
      trackSize="15px"
      defaultValue={50}
    />
  );
};