// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import { Label } from "@coreai-ds/react-components";
import { Slider } from "@coreai-ds/react-components";
import * as React from 'react';

export const Size = (): JSXElement => {
    const smallId = useId('small');
    const mediumId = useId('medium');
    return (<>
      <Label htmlFor={mediumId}>Medium Slider</Label>
      <Slider size="medium" defaultValue={20} id={mediumId}/>

      <Label htmlFor={smallId}>Small Slider</Label>
      <Slider size="small" defaultValue={20} id={smallId}/>
    </>);
};

export default Size;