import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
import * as ListItemSliderStories from './ListItemSlider.stories';
import * as ListItemStories from './ListItem.stories';
import * as SliderStories from '../Slider/Slider.stories';

<Meta of={ListItemSliderStories} />

<Title />

<Description />

## Source

https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/%40lightningjs/ui-components/src/components/ListItem/ListItemSlider.js

## Usage

The `ListItemSlider` can display a `title` and `value`

```js
import { ListItemSlider } from '@lightningjs/ui-components';

class Basic extends lng.Component {
  static _template() {
    return {
      ListItemSlider: {
        type: ListItemSlider,
        title: 'List Item',
        value: 50
      }
    };
  }
}
```

## API

### Parent Properties

`ListItemSlider` contains all the properties of `ListItem`

<ArgTypes of={ListItemStories.ListItem} />

### Properties

<ArgTypes of={ListItemSliderStories.ListItemSlider} />

### Slider Properties

<ArgTypes of={SliderStories.Basic} />

### Style Properties

| name           | type   | description                      |
| -------------- | ------ | -------------------------------- |
| paddingY       | number | space above and below the slider |
| sliderStyles   | object | overwrite any styles in slider   |
| valueTextStyle | object | text style to apply to the value |
