diff --git a/apps/docs/content/_data/components.json b/apps/docs/content/_data/components.json index 79622100f7..1fea305068 100644 --- a/apps/docs/content/_data/components.json +++ b/apps/docs/content/_data/components.json @@ -263,8 +263,14 @@ }, { "title": "Slider", - "page": "legacy", - "markdown": "./libs/components/src/lib/slider/README.md" + "description": "Allows users to choose from a range of values along a horizontal or vertical line", + "variations": "./libs/components/src/lib/slider/VARIATIONS.md", + "guidelines": "./libs/components/src/lib/slider/GUIDELINES.md", + "hideGuidelines": "true", + "code": "./libs/components/src/lib/slider/README.md", + "accessibility": "./libs/components/src/lib/slider/ACCESSIBILITY.md", + "useCases": "./libs/components/src/lib/slider/USE-CASES.md", + "hideUseCases": "true" }, { "title": "Tabs", @@ -370,7 +376,8 @@ "hideGuidelines": "true", "code": "./libs/components/src/lib/range-slider/README.md", "accessibility": "./libs/components/src/lib/range-slider/ACCESSIBILITY.md", - "useCases": "./libs/components/src/lib/range-slider/USE-CASES.md" + "useCases": "./libs/components/src/lib/range-slider/USE-CASES.md", + "status": "alpha" }, { "title": "Split Button", diff --git a/libs/components/src/lib/range-slider/README.md b/libs/components/src/lib/range-slider/README.md index b6c7bd78f2..cb47764d28 100644 --- a/libs/components/src/lib/range-slider/README.md +++ b/libs/components/src/lib/range-slider/README.md @@ -34,7 +34,7 @@ registerRangeSlider('your-prefix'); import { VRangeSlider } from '@vonage/vivid-vue'; ``` @@ -168,6 +168,7 @@ Use this to configure the [`pin`](/variation/#pin) string. | **aria-start-label** | `string` | Aria label for the start thumb | | **aria-end-label** | `string` | Aria label for the end thumb | | **connotation** | _Enum_:
`accent`
`cta` | The connotation of the component | +| **disabled** | `boolean` | Sets the element's disabled state | | **end** | `string` | The current end value of the element. | | **markers** | `boolean` | Display markers on/off | | **max** | `number` | The maximum value of the range. | diff --git a/libs/components/src/lib/slider/ACCESSIBILITY.md b/libs/components/src/lib/slider/ACCESSIBILITY.md new file mode 100644 index 0000000000..a245ab6ecc --- /dev/null +++ b/libs/components/src/lib/slider/ACCESSIBILITY.md @@ -0,0 +1,9 @@ +## Implementation + +The slider has a `role` of `slider`, which needs an accessible label. You must provide it using `aria-label`. + +Vivid automatically sets the `aria-valuetext` attribute on the slider. The attribute is read by assistive technology. You can control its format using the `valueTextFormatter` property for a more human-readable value. + +## Resources + +- [Vivid Tabs: Manual accessibility test](https://docs.google.com/spreadsheets/d/15J0sHxVUlmjv7HwT2b0gGNJFP_vsjAByzgRP_4oWYKk/edit?gid=1175911860#gid=1175911860) diff --git a/libs/components/src/lib/slider/GUIDELINES.md b/libs/components/src/lib/slider/GUIDELINES.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/components/src/lib/slider/README.md b/libs/components/src/lib/slider/README.md index b9c76f7b08..f0db3813c8 100644 --- a/libs/components/src/lib/slider/README.md +++ b/libs/components/src/lib/slider/README.md @@ -1,23 +1,58 @@ -# Slider +## Usage -Represents a slider custom element. + + + ```js - +import '@vonage/vivid/slider'; +``` + +or, if you need to use a unique prefix: + +```js +import { registerSlider } from '@vonage/vivid'; + +registerSlider('your-prefix'); ``` ```html preview - + + + ``` -## Members + + + -### Min +```html + + +``` -Use `min` to set the lowest value allowed for the slider. + + -- Type: `number` -- Default: `0` +## Value + +Set the `value` attribute to set the value of the slider. + +```html preview blocks + +``` + +## Min + +Use the `min` attribute to set the lowest value allowed for the Slider. +The default value of `min` is `0`. ```html preview blocks
@@ -36,12 +71,10 @@ Use `min` to set the lowest value allowed for the slider. ``` -### Max +## Max -Use `max` to set the greatest value allowed for the slider. - -- Type: `number` -- Default: `10` +Use the `max` attribute to set the highest value allowed for the Slider. +The default value `max` of is `0`. ```html preview blocks
@@ -60,12 +93,10 @@ Use `max` to set the greatest value allowed for the slider. ``` -### Step - -Use `step` to set determine the granularity with which values can be incremented/decremented. +## Step -- Type: `number` -- Default: `1` +Use the `step` attribute sets the granularity with which values can be incremented/decremented. +The default value `step` of is `1`. ```html preview blocks
@@ -84,78 +115,32 @@ Use `step` to set determine the granularity with which values can be incremented ``` -### Orientation +## Value Text Formatter -When used vertically, the slider fills the height of its container. - -- Type: `'horizontal'` | `'vertical'` -- Default: `'horizontal'` - -```html preview center 300px - -``` - -### Markers - -Toggles markers display. -Markers are set according to the value of step (1 by default). - -- Type: `boolean` -- Default: `false` - -```html preview blocks - -``` +Use the `valueTextFormatter` to generates a string for the Slider's "aria-valuetext" attribute based on the current value. +Use this to configure the [`pin`](/variation/#pin) string. -### Connotation +## API Reference -- Type: `'accent'` | `'cta'` -- Default: `'accent'` +### Properties -```html preview blocks - -``` - -### Pin - -Toggles display the value through a tooltip. Use the `valueTextFormatter` member to customize the format of the value. - -- Type: `boolean` -- Default: `false` - -```html preview - - - -``` - -### Disabled - -Toggle the `disabled` member to disable/enable the slider. - -- Type: `boolean` -- Default: `false` - -```html preview blocks - -``` - -### Value - -Use `value` to set the value of the slider. +
-- Type: `string` -- Default: `5` +| Name | Type | Description | +| --------------- | --------------------------------------- | -------------------------------------------------------------------- | +| **connotation** | _Enum_:
`accent`
`cta` | The connotation of the component | +| **disabled** | \_`boolean` | Sets the element's disabled state | +| **markers** | `boolean` | Display markers on/off | +| **max** | `number` | The maximum value of the range. | +| **min** | `number` | The minimum value of the range. | +| **orientation** | _Enum_:
`horizontal`
`vertical` | The orientation of the slider. | +| **pin** | `boolean` | Show current values on the thumbs. | +| **step** | `number` | Value to increment or decrement via arrow keys, mouse click or drag. | +| **value** | `number` | Set the value attribute to set the value of the slider. | -```html preview blocks - -``` +
-## Events +### Events
@@ -164,9 +149,3 @@ Use `value` to set the value of the slider. | `change` | `CustomEvent` | Yes | Yes | Fires a custom 'change' event when the slider value changes |
- -## Accessibility - -The slider has a `role` of `slider`, which needs an accessible label. You must provide it using `aria-label`. - -Vivid automatically sets the `aria-valuetext` attribute on the slider. The attribute is read by assistive technology. You can control its format using the `valueTextFormatter` property for a more human-readable value. diff --git a/libs/components/src/lib/slider/USE-CASES.md b/libs/components/src/lib/slider/USE-CASES.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/components/src/lib/slider/VARIATIONS.md b/libs/components/src/lib/slider/VARIATIONS.md new file mode 100644 index 0000000000..cf1852dbbf --- /dev/null +++ b/libs/components/src/lib/slider/VARIATIONS.md @@ -0,0 +1,54 @@ +## Connotation + +Use the `connotation` attribute on Slider to control the Slider track. +Below is an example of cta connotation. + +```html preview blocks> + +``` + +## Markers + +Use `markers` attribute to add tick marks on the slider. +The markers are set by the value of [`step`](./code/#step). + +```html preview blocks + +``` + +## Orientation + +The `orientation` attribute controls which axis the Slider is aligned. +Below is an example of vertical alignment. + + +

When used vertically, the Slider fits the height of its container.

+ + +```html preview center 300px + +``` + +## Pin + +Use `pin` attribute to display a tooltip on the Slider knob. +Use the [`valueTextFormatter`](/code/#value-text-formatter) member to customize the format of the value. + +```html preview + + + + +``` + +## Disabled + +The `disabled` attribute disables the Slider. + +```html preview blocks + +```