wix-style-react
Version:
79 lines (78 loc) • 3.16 kB
JavaScript
export default {
description:
'Slider is an input field that enables our users to select a value within a given number range. It’s handy when a user needs an approximate but not a precise value.',
do: [
'Use it to adjust settings, such as opacity, brightness or volume.',
'Use it to specify an accepted range of values, such as price range.',
],
dont: [
'Don’t use it to select a value within an extremely small range (e.g., 1-3). Use <RadioGroup/> or <NumberInput/> instead.',
],
featureExamples: [
{
title: 'Range',
description: `Specify a range of a slider by defining \`min\` and \`max\` values.`,
example: '_range',
},
{
title: 'Values',
description: `Specifies what \`value\` slider will represent:<br/>
 - \`number\` (default) - use it to select value within a given range.<br/>
 - \`array\` - use it to select a range of values within a given range.`,
example: '_values',
},
{
title: 'Start point',
description: `Control the starting point of a slider with \`startPoint\` prop.
A default starting point is a minimum value from a defined range.`,
example: '_startPoint',
},
{
title: 'Marks',
description: `Use marks to indicate allowed selections that slider thumb will snap to.
Marks are enabled by default, but can be hidden using \`displayMarks\` prop.<br/>
<br/>
Default marks display numeric values of start and end of a range.`,
example: '_marks',
},
{
title: 'Custom marks',
description: `Define custom marks for each accepted selection value via \`marks\` prop. It accepts numeric or string values.`,
example: '_customMarks',
},
{
title: 'Step',
description: `Define a step to reduce the amount of accepted values within a range.
Default step is 1 and might not work well for larger value ranges, such as 1-1000. `,
example: '_step',
},
{
title: 'Disabled',
description: `Disable all slider interactions with \`disabled\` prop. Use it to highlight a temporary unavailable function.`,
example: '_disabled',
},
{
title: 'Pushable & crossing handles',
description: `Control whether range slider handles should cross or push one another. By default handles are allowed to cross.
If \`pushable\` prop is set, moving the handle on top of another one will move the whole selected range.`,
example: '_handles',
},
],
commonUseCaseExamples: [
{
title: 'Editable slider',
description: `In situations where users should be able to precisely input a value, the value can be editable within a text field.`,
example: '_editableSlider',
},
{
title: 'Composer',
description: `Use slider in composers to adjust a variety of settings such as opacity, brightness, border radius, border weights, etc.`,
example: '_composer',
},
{
title: 'Form',
description: `Use slider in forms to allow users to quickly select a value within a range.`,
example: '_form',
},
],
};