From 3035d18a261dcc8a9f04bc6d0d8a5d4355773ae4 Mon Sep 17 00:00:00 2001 From: mhartington Date: Mon, 5 Mar 2018 17:11:30 -0500 Subject: [PATCH] docs(range): add more range docs --- packages/core/src/components/range/readme.md | 81 +++++++++++--------- 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/packages/core/src/components/range/readme.md b/packages/core/src/components/range/readme.md index ea1976ece2..f48309da6a 100644 --- a/packages/core/src/components/range/readme.md +++ b/packages/core/src/components/range/readme.md @@ -1,10 +1,50 @@ -# ion-range-knob +# ion-range +The Range slider lets users select from a range of values by moving +the slider knob. It can accept dual knobs, but by default one knob +controls the value of the range. +### Range Labels + +Labels can be placed on either side of the range by adding the +`slot="start"` or `slot="end"` to the element. The element doesn't have to +be an `ion-label`, it can be added to any element to place it to the +left or right of the range. See [usage](#usage) below for examples. + +### Usage + +```html + + + + + + + + -200 + 200 + + + + + + + + + + + + + + + + + + +``` - ## Properties #### color @@ -15,7 +55,6 @@ The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). - #### debounce number @@ -23,42 +62,34 @@ number How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. - #### disabled boolean - #### dualKnobs boolean Show two knobs. Defaults to `false`. - #### max number Maximum integer value of the range. Defaults to `100`. - #### min number Minimum integer value of the range. Defaults to `0`. - #### mode - - The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - #### pin boolean @@ -66,7 +97,6 @@ boolean If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`. - #### snaps boolean @@ -74,21 +104,18 @@ boolean If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. - #### step number Specifies the value granularity. Defaults to `1`. - #### value any the value of the range. - ## Attributes #### color @@ -99,7 +126,6 @@ The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). - #### debounce number @@ -107,42 +133,34 @@ number How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. - #### disabled boolean - #### dual-knobs boolean Show two knobs. Defaults to `false`. - #### max number Maximum integer value of the range. Defaults to `100`. - #### min number Minimum integer value of the range. Defaults to `0`. - #### mode - - The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - #### pin boolean @@ -150,7 +168,6 @@ boolean If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`. - #### snaps boolean @@ -158,43 +175,36 @@ boolean If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. - #### step number Specifies the value granularity. Defaults to `1`. - #### value any the value of the range. - ## Events #### ionBlur Emitted when the range loses focus. - #### ionChange Emitted when the value property has changed. - #### ionFocus Emitted when the range has focus. - #### ionStyle Emitted when the styles change. - ## Methods #### ratio() @@ -203,15 +213,12 @@ Returns the ratio of the knob's is current location, which is a number between `0` and `1`. If two knobs are used, this property represents the lower value. - #### ratioUpper() Returns the ratio of the upper value's is current location, which is a number between `0` and `1`. If there is only one knob, then this will return `null`. +--- - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_