<!--
  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 { Canvas, Story } from '@storybook/addon-docs';

# 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
      }
    };
  }
}
```

<Canvas>
  <Story id="utilities-slider--basic" />
</Canvas>

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          | +/- value on change    |
| value | number | false    | 0 or `min` | current value          |

### 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                      |
| sliderHeight         | number  | height of the slider                                                                             |

### Signals

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

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