react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
207 lines (206 loc) • 8.53 kB
JSON
{
"name": "Slider",
"category": "incubator",
"description": "A Slider component",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx",
"images": [],
"props": [
{"name": "value", "type": "number", "description": "Initial value"},
{"name": "minimumValue", "type": "number", "description": "Track minimum value"},
{"name": "maximumValue", "type": "number", "description": "Track maximum value"},
{"name": "initialMinimumValue", "type": "number", "description": "Initial minimum value", "note": "Only when `useRange` is true"},
{"name": "initialMaximumValue", "type": "number", "description": "Initial maximum value", "note": "Only when `useRange` is true"},
{
"name": "step",
"type": "number",
"description": "Step value of the slider. The value should be between 0 and (maximumValue - minimumValue)"
},
{
"name": "useRange",
"type": "boolean",
"description": "If true the Slider will display a second thumb for the min value"
},
{
"name": "useGap",
"type": "boolean",
"description": "If true the min and max thumbs will not overlap",
"default": "true"
},
{"name": "onValueChange", "type": "SliderOnValueChange", "description": "Callback for onValueChange"},
{
"name": "onRangeChange",
"type": "SliderOnRangeChange",
"description": "Callback for onRangeChange. Returns values object with the min and max values"
},
{
"name": "onSeekStart",
"type": "() => void",
"description": "Callback that notifies about slider seeking is started"
},
{
"name": "onSeekEnd",
"type": "() => void",
"description": "Callback that notifies about slider seeking is finished"
},
{
"name": "onReset",
"type": "() => void",
"description": "Callback that notifies when the reset function was invoked"
},
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"},
{
"name": "minimumTrackTintColor",
"type": "string",
"description": "The color used for the track from minimum value to current value"
},
{"name": "maximumTrackTintColor", "type": "string", "description": "The track color"},
{"name": "trackStyle", "type": "ViewStyle", "description": "The track style"},
{
"name": "renderTrack",
"type": "() => ReactElement | ReactElement[]",
"description": "Custom render instead of rendering the track"
},
{"name": "thumbTintColor", "type": "string", "description": "Thumb color"},
{"name": "disabledThumbTintColor", "type": "string", "description": "Disabled thumb color"},
{"name": "thumbStyle", "type": "ViewStyle", "description": "The thumb style"},
{"name": "activeThumbStyle", "type": "ViewStyle", "description": "The active (during press) thumb style"},
{
"name": "enableThumbShadow",
"type": "boolean",
"description": "Whether the thumb will have a shadow (with 'migrate' true only)",
"default": "true"
},
{"name": "thumbHitSlop", "type": "number", "description": "Defines how far a touch event can start away from the thumb"},
{
"name": "disableActiveStyling",
"type": "boolean",
"description": "If true the Slider will not change it's style on press"
},
{
"name": "disabled",
"type": "boolean",
"description": "If true the Slider will be disabled and will appear in disabled color"
},
{
"name": "disableRTL",
"type": "boolean",
"description": "If true the Slider will stay in LTR mode even if the app is on RTL mode"
},
{
"name": "accessible",
"type": "boolean",
"description": "If true the component will have accessibility features enabled"
},
{
"name": "throttleTime",
"type": "number",
"description": "Control the throttle time of the onValueChange and onRangeChange callbacks"
},
{"name": "testID", "type": "string", "description": "The component test id"}
],
"snippet": [
"<Incubator.Slider",
" value={0}",
" minimumValue={0}",
" maximumValue={10}",
" onValueChange={value => console.log(\\`value changed: \\${value}\\`)}",
"/>"
],
"docs": {
"hero": {
"title": "Slider",
"description": "Sliders allow users to make selections from a range of values in a quick and interactive way.\nSliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_hero.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "section",
"title": "Usage examples",
"description": "Sliders can be used for various types of user input and controls, for example an amount, or a specific setting.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_section_examples.png"
}
]
},
{
"type": "table",
"columns": [
"Slider type",
"Preview"
],
"items": [
{
"title": "Linear slider",
"description": "Use this slider to allow the user to select a numeric value from a range of numbers.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_linear.png"
}
]
},
{
"title": "Centered slider",
"description": "This type allows the user to select negative values.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_centered.png"
}
]
},
{
"title": "Range slider",
"description": "Use this slider to allow the user to select a range of values.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_range.png"
}
]
},
{
"title": "Color slider",
"description": "Use this slider to allow the user to select a color from a gradient range of colors.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_color.png"
}
]
}
],
"title": "Slider types"
},
{
"type": "section",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_linear.png"
}
],
"title": "Spec",
"description": "markdown: **Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
},
{
"type": "section",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
}
],
"description": "markdown: **Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
}
]
}
]
}
}