import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Slider</Title>

    The Slider component is a UI element that allows users to select a value from a range of values by sliding a thumb along a track.
    It is a widely used component in user interfaces and is commonly used to adjust settings, input numerical values, or filter content.

    <Subtitle>Usage</Subtitle>

    When designing a user interface, it is important to use Slider components in a way that is intuitive and enhances the user experience. Here are some best practices for using Slider components:

    - Use a Slider when there is a need to adjust values within a specific range. Sliders are a great choice when you want users to be able to adjust something, but within a predetermined range.
    - Use a Slider when the range of values is continuous. Sliders are best suited for continuous data ranges, rather than discrete values.
    - Use a Slider when the range of values is small and easy to comprehend. Sliders are most effective when the range of values is small enough to be easily understood by the user.
    - Use a Slider when there is a need to provide visual feedback to the user. Sliders provide visual feedback that can be very helpful to users, especially when used in combination with other UI elements such as charts or graphs.

    <Subtitle>👍 When to use</Subtitle>

    Sliders are a versatile UI element that can be used in a variety of situations. Here are some situations where using a Slider is a good choice:

    - When there is a need to adjust settings or input numerical values. Sliders are a great way to allow users to adjust settings such as volume, brightness, or font size.
    - When the range of values is continuous and easy to comprehend. Sliders are best suited for continuous data ranges, rather than discrete values.
    - When there is a need to provide visual feedback to the user. Sliders provide visual feedback that can be very helpful to users, especially when used in combination with other UI elements such as charts or graphs.

    <Title>Properties</Title>

    <ArgTypes of="bq-slider" />
  </div>
</div>
