# Slider

A versatile UI component for selecting a single value or range from a predefined set by dragging a thumb.

### **Import**
```tsx
import { Slider } from '@app-studio/web';
```

### **Default**
```tsx
import React, { useState } from 'react';
import { Vertical } from 'app-studio';
import { Slider } from '../Slider';

export const DefaultDemo = () => {
  const [value, setValue] = useState(50);

  const handleChange = (newValue: number) => {
    setValue(newValue);
  };

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Slider
        label="Default Slider"
        value={value}
        onChange={handleChange}
        showValue
        helperText="Drag the slider to change the value"
      />
    </Vertical>
  );
};
```

### **stepValues**
An array of specific values the slider can snap to.

- **Type:** `number[]`

```tsx
import React, { useState } from 'react';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';
import { Text } from 'app-studio';
import { Slider } from '../Slider';

export const StepValuesDemo = () => {
  const [value, setValue] = useState(25);

  // Define specific values that the slider can take
  const stepValues = [0, 25, 50, 75, 100];

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Slider
        label="Slider with Specific Steps"
        value={value}
        onChange={setValue}
        min={0}
        max={100}
        stepValues={stepValues}
        showValue
        helperText="This slider only allows values: 0, 25, 50, 75, 100"
      />

      <Horizontal justifyContent="space-between" width="100%">
        {stepValues.map((step) => (
          <Text key={step} fontSize={12} color="color-blueGray-500">
            {step}
          </Text>
        ))}
      </Horizontal>
    </Vertical>
  );
};

export const PricingTiersDemo = () => {
  const [value, setValue] = useState(19.99);

  // Define pricing tiers
  const pricingTiers = [9.99, 19.99, 29.99, 49.99, 99.99];

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text fontSize={16} fontWeight={500}>
        Select Your Pricing Plan
      </Text>

      <Slider
        value={value}
        onChange={setValue}
        min={0}
        max={100}
        stepValues={pricingTiers}
        showValue
        views={{
          track: {
            backgroundColor: 'color-green-100',
            height: 8,
          },
          progress: {
            backgroundColor: 'color-green-500',
          },
          thumb: {
            backgroundColor: 'color-white',
            border: '2px solid color-green-500',
          },
          valueLabel: {
            backgroundColor: 'color-green-500',
            color: 'color-white',
            padding: '2px 8px',
            borderRadius: 4,
            fontWeight: 600,
          },
          stepMarks: {
            width: 6,
            height: 6,
            backgroundColor: 'color-green-700',
          },
        }}
      />

      <Horizontal justifyContent="space-between" width="100%">
        {pricingTiers.map((price) => (
          <Text
            key={price}
            fontSize={12}
            color="color-green-700"
            fontWeight={500}
          >
            ${price}
          </Text>
        ))}
      </Horizontal>

      <Text fontSize={14} color="color-blueGray-600" textAlign="center">
        Selected Plan: ${value}/month
      </Text>
    </Vertical>
  );
};
```

### **Controlled**

```tsx
import React, { useState } from 'react';
import { Slider } from '../Slider';
import { Text } from 'app-studio';
import { Button } from '../../Button/Button';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';

export const ControlledDemo = () => {
  const [volume, setVolume] = useState(75);

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text>Controlled Slider (Value: {volume})</Text>
      <Slider
        value={volume}
        onChange={setVolume}
        min={0}
        max={100}
        step={1}
        ariaLabel="Controlled volume"
        showTooltip
      />
      <Horizontal gap={10}>
        <Button onClick={() => setVolume(0)}>Mute</Button>
        <Button onClick={() => setVolume(50)}>50%</Button>
        <Button onClick={() => setVolume(100)}>Max</Button>
      </Horizontal>
    </Vertical>
  );
};
```

### **Custom**

```tsx
import React, { useState } from 'react';
import { Vertical } from 'app-studio';
import { Slider } from '../Slider';

export const CustomDemo = () => {
  const [value, setValue] = useState(75);

  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      <Slider
        label="Custom Styled Slider"
        value={value}
        onChange={setValue}
        showValue
        min={0}
        max={200}
        step={5}
        views={{
          track: {
            backgroundColor: 'color-purple-200',
            height: 10,
            borderRadius: 5,
          },
          progress: {
            backgroundColor: 'color-purple-500',
          },
          thumb: {
            backgroundColor: 'color-white',
            border: '2px solid color-purple-500',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
          },
          label: {
            color: 'color-purple-700',
            fontWeight: 600,
          },
          valueLabel: {
            backgroundColor: 'color-purple-500',
            color: 'color-white',
            padding: '2px 8px',
            borderRadius: 4,
          },
        }}
      />
    </Vertical>
  );
};
```

### **Disabled**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Slider } from '../Slider';

export const DisabledDemo = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Slider
        label="Disabled Slider"
        value={30}
        isDisabled
        showValue
        helperText="This slider is disabled and cannot be interacted with"
      />
    </Vertical>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './sizes';
export * from './variants';
export * from './disabled';
export * from './custom';
export * from './range';
export * from './stepValues';
export * from './vertical';
export * from './tooltip';
export * from './controlled';
export * from './shapes';
export * from './tooltipIntegration';
```

### **Range**

```tsx
import React, { useState } from 'react';
import { Horizontal } from 'app-studio';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';
import { Slider } from '../Slider';

export const RangeDemo = () => {
  const [minValue, setMinValue] = useState(20);
  const [maxValue, setMaxValue] = useState(80);

  const handleMinChange = (value: number) => {
    // Ensure min value doesn't exceed max value
    setMinValue(Math.min(value, maxValue - 1));
  };

  const handleMaxChange = (value: number) => {
    // Ensure max value doesn't go below min value
    setMaxValue(Math.max(value, minValue + 1));
  };

  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      <Text fontSize={16} fontWeight={500}>
        Price Range Filter
      </Text>

      <Slider
        label="Min Value"
        value={minValue}
        onChange={handleMinChange}
        min={0}
        max={100}
        showValue
      />

      <Slider
        label="Max Value"
        value={maxValue}
        onChange={handleMaxChange}
        min={0}
        max={100}
        showValue
      />

      <Horizontal justifyContent="space-between" alignItems="center">
        <Text>Selected Range:</Text>
        <Text fontWeight={500}>
          ${minValue} - ${maxValue}
        </Text>
      </Horizontal>
    </Vertical>
  );
};
```

### **Shapes**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Slider } from '../Slider';
import { Shape } from '../Slider/Slider.type';

export const ShapesDemo = () => {
  const shapes: Shape[] = ['square', 'rounded', 'pill'];

  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      {shapes.map((shape) => (
        <Slider
          key={shape}
          label={`${shape} Shape`}
          shape={shape}
          value={50}
          showValue
        />
      ))}
    </Vertical>
  );
};
```

### **Sizes**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Slider } from '../Slider';
import { Size } from '../Slider/Slider.type';

export const SizesDemo = () => {
  const sizes: Size[] = ['xs', 'sm', 'md', 'lg', 'xl'];

  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      {sizes.map((size) => (
        <Slider
          key={size}
          label={`${size.toUpperCase()} Size`}
          size={size}
          value={50}
          showValue
        />
      ))}
    </Vertical>
  );
};
```

### **Tooltip**

```tsx
import React from 'react';
import { Slider } from '../Slider';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';

export const TooltipDemo = () => {
  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      <View>
        <Text marginBottom={10}>Slider with Tooltip</Text>
        <Slider defaultValue={42} showTooltip ariaLabel="Slider with tooltip" />
      </View>

      <View>
        <Text marginBottom={10}>Vertical Slider with Tooltip</Text>
        <Horizontal>
          <View height={200} marginTop={10}>
            <Slider
              orientation="vertical"
              defaultValue={65}
              showTooltip
              ariaLabel="Vertical slider with tooltip"
            />
          </View>
        </Horizontal>
      </View>
    </Vertical>
  );
};
```

### **TooltipIntegration**

```tsx
import React, { useState } from 'react';
import { Slider } from '../Slider';
import { Tooltip } from '../../Tooltip/Tooltip';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';
import { InfoIcon } from '../../Icon/Icon';

export const TooltipIntegrationDemo = () => {
  const [value, setValue] = useState(50);

  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      <View>
        <Horizontal alignItems="center" marginBottom={10}>
          <Text marginRight={5}>Volume Control</Text>
          <Tooltip content="Adjust the volume level from 0 to 100">
            <InfoIcon size={16} cursor="pointer" />
          </Tooltip>
        </Horizontal>

        <Slider
          value={value}
          onChange={setValue}
          ariaLabel="Volume slider with custom tooltip integration"
        />
      </View>
    </Vertical>
  );
};
```

### **Variants**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Slider } from '../Slider';
import { Variant } from '../Slider/Slider.type';

export const VariantsDemo = () => {
  const variants: Variant[] = ['default', 'outline'];

  return (
    <Vertical gap={30} width="100%" maxWidth={400}>
      {variants.map((variant) => (
        <Slider
          key={variant}
          label={`${variant} Variant`}
          variant={variant}
          value={50}
          showValue
        />
      ))}
    </Vertical>
  );
};
```

### **Vertical**

```tsx
import React from 'react';
import { Slider } from '../Slider';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Horizontal } from 'app-studio';

export const VerticalDemo = () => {
  const [level, setLevel] = React.useState(25);

  return (
    <Horizontal gap={20} alignItems="center">
      <Text>Vertical Slider (Level: {level})</Text>
      <View height={250}>
        <Slider
          orientation="vertical"
          value={level}
          onChange={setLevel}
          min={0}
          max={100}
          step={5}
          ariaLabel="Vertical level control"
          showTooltip
        />
      </View>
    </Horizontal>
  );
};
```