{/* prettier-ignore */}
{/*
Copyright 2023 Comcast Cable Communications Management, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

SPDX-License-Identifier: Apache-2.0
\*/}

import { Meta, Title } from '@storybook/blocks';
import * as SliderStories from './Slider.stories';

<Meta title="Components/Slider" />

# Slider

Progress control component, similar to the DOM's [input[type="range"]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

## Source

https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Slider/Slider.js

## Usage

Allows a user to select from a range of values using the `<-` and `->` keys.

```js
import { Slider, SliderLarge } from '@lightningjs/lightning-ui';

class Example extends lng.Component {
  static _template() {
    return {
      Slider: {
        type: Slider
      }
    };
  }
}
```

The `Slider` can be initialized with a `min`, `max` and current `value`. The `min` and `max` properties determine the bounds of the `Slider`. The `value` prop should be greater than or equal to `min` and less than or equal to `max`.

```js
import { Slider } from '@lightningjs/lightning-ui';

class Example extends lng.Component {
  static _template() {
    return {
      Slider: {
        type: Slider,
        min: 1,
        max: 5,
        value: 3
      }
    };
  }
}
```

The `step` property can be used to indicate _how much_ the slider should move by. In the below example, pressing `->` will jump by 10.

```js
class Example extends lng.Component {
  static _template() {
    return {
      Slider: {
        type: Slider,
        step: 10
      }
    };
  }
}
```

### Signal handling

React to changes to the `Slider` value using the `onChange` signal.

## API

### Properties

| name     | type    | readonly | default    | description                                                                                           |
| -------- | ------- | -------- | ---------- | ----------------------------------------------------------------------------------------------------- |
| max      | number  | false    | 100        | upper bound of `value`                                                                                |
| min      | number  | false    | 0          | lower bound of `value`                                                                                |
| step     | number  | false    | 1          | increment or decrement step for changing the value of the slider                                      |
| value    | number  | false    | 0 or `min` | current value of slider                                                                               |
| vertical | boolean | false    | 0 or `min` | If set to true, the slider will be displayed vertically otherwise, it will be displayed horizontally. |

### Style Properties

| name                 | type    | description                                                                                      |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------ |
| arrowAlphaValue      | number  | alpha value of the arrows if value is not equal to the min/max value                             |
| arrowAlphaValueLimit | number  | alpha value of the arrows when value is equal to the min/max value and slider is not disabled    |
| arrowColor           | string  | color of the arrows                                                                              |
| arrowHeight          | number  | height of the arrows                                                                             |
| arrowSpacing         | number  | space between the arrow and the slider                                                           |
| arrowWidth           | number  | width of the arrows                                                                              |
| circleColor          | string  | color of the knob                                                                                |
| containerHeight      | number  | height of the container that holds the slider                                                    |
| minWidth             | number  | minimum width of the slider container                                                            |
| progressStyle        | object  | style inherited from progressBar [See ProgressBar documentation](../ProgressBar/ProgressBar.mdx) |
| showArrows           | boolean | if true, will display the left and right arrows on the slider                                    |
| showKnob             | boolean | if true, will display the focused circle on the current value of the slider                      |

### Signals

#### onChange(value:number, signal:Signal)

Fires on key Left/Right events when `Slider` is in focus.
