Skip to content

Commit

Permalink
fix(ld-slider): accept type number for value prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur @renet
borisdiakur authored and renet committed Jan 31, 2023
1 parent f29bfe8 commit d6437c4
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 27 deletions.
6 changes: 4 additions & 2 deletions src/liquid/components/ld-slider/ld-slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ export class LdSlider implements InnerFocusable {
/** Adds custom stop points to the slider (instead of steps) */
@Prop() unit?: string
/** Specifies the default value */
@Prop({ mutable: true, reflect: true }) value?: string = String(this.min)
@Prop({ mutable: true, reflect: true }) value?: string | number = String(
this.min
)
/** Width of the slider */
@Prop() width? = '100%'

Expand Down Expand Up @@ -304,7 +306,7 @@ export class LdSlider implements InnerFocusable {
}

updateValues = (autoCorrectValues = false) => {
const values = this.value
const values = String(this.value)
.split(',')
.map((value) => Number.parseInt(value, 10))

Expand Down
50 changes: 25 additions & 25 deletions src/liquid/components/ld-slider/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,31 +241,31 @@ By default, the `ld-slider` applies a width of `100%`. You can set it to any fix

## Properties

| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------- | ------------------------------------------------------------ | ------------------ | ------------------ |
| `ariaDisabled` | `aria-disabled` | Alternative disabled state that keeps element focusable | `string` | `undefined` |
| `disabled` | `disabled` | Disabled state of the slider | `boolean` | `false` |
| `hideStopLabels` | `hide-stop-labels` | Prevents rendering of the stop labels below the slider | `boolean` | `false` |
| `hideValueLabels` | `hide-value-labels` | Prevents rendering of the value labels below the slider | `boolean` | `false` |
| `hideValues` | `hide-values` | Makes the current values only visible on interaction | `boolean` | `false` |
| `indicators` | `indicators` | Specifies the legal number intervals | `boolean` | `false` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `labelFrom` | `label-from` | "From" value label (when exactly 2 values are given) | `string` | `'From'` |
| `labelTo` | `label-to` | "To" value label (when exactly 2 values are given) | `string` | `'To'` |
| `labelValue` | `label-value` | "Value" label (when exactly 2 values are given) | `string` | `'Value'` |
| `ldTabindex` | `ld-tabindex` | Tab index of the input(s). | `number` | `undefined` |
| `max` | `max` | Specifies the maximum value allowed | `number` | `100` |
| `min` | `min` | Specifies the minimum value allowed | `number` | `0` |
| `negative` | `negative` | Swap which areas are being marked as selected and deselected | `boolean` | `false` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `size` | `size` | Size of the thumb(s). | `"lg" \| "sm"` | `undefined` |
| `snapOffset` | `snap-offset` | Offset inside which a thumb snaps to a stop point | `number` | `undefined` |
| `step` | `step` | Specifies the legal number intervals | `number` | `undefined` |
| `stops` | `stops` | Adds custom stop points to the slider (instead of steps) | `string` | `undefined` |
| `swappable` | `swappable` | Allows swapping of thumbs | `boolean` | `false` |
| `unit` | `unit` | Adds custom stop points to the slider (instead of steps) | `string` | `undefined` |
| `value` | `value` | Specifies the default value | `string` | `String(this.min)` |
| `width` | `width` | Width of the slider | `string` | `'100%'` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------- | ------------------------------------------------------------ | ------------------ | -------------------------- |
| `ariaDisabled` | `aria-disabled` | Alternative disabled state that keeps element focusable | `string` | `undefined` |
| `disabled` | `disabled` | Disabled state of the slider | `boolean` | `false` |
| `hideStopLabels` | `hide-stop-labels` | Prevents rendering of the stop labels below the slider | `boolean` | `false` |
| `hideValueLabels` | `hide-value-labels` | Prevents rendering of the value labels below the slider | `boolean` | `false` |
| `hideValues` | `hide-values` | Makes the current values only visible on interaction | `boolean` | `false` |
| `indicators` | `indicators` | Specifies the legal number intervals | `boolean` | `false` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `labelFrom` | `label-from` | "From" value label (when exactly 2 values are given) | `string` | `'From'` |
| `labelTo` | `label-to` | "To" value label (when exactly 2 values are given) | `string` | `'To'` |
| `labelValue` | `label-value` | "Value" label (when exactly 2 values are given) | `string` | `'Value'` |
| `ldTabindex` | `ld-tabindex` | Tab index of the input(s). | `number` | `undefined` |
| `max` | `max` | Specifies the maximum value allowed | `number` | `100` |
| `min` | `min` | Specifies the minimum value allowed | `number` | `0` |
| `negative` | `negative` | Swap which areas are being marked as selected and deselected | `boolean` | `false` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `size` | `size` | Size of the thumb(s). | `"lg" \| "sm"` | `undefined` |
| `snapOffset` | `snap-offset` | Offset inside which a thumb snaps to a stop point | `number` | `undefined` |
| `step` | `step` | Specifies the legal number intervals | `number` | `undefined` |
| `stops` | `stops` | Adds custom stop points to the slider (instead of steps) | `string` | `undefined` |
| `swappable` | `swappable` | Allows swapping of thumbs | `boolean` | `false` |
| `unit` | `unit` | Adds custom stop points to the slider (instead of steps) | `string` | `undefined` |
| `value` | `value` | Specifies the default value | `number \| string` | `String( this.min )` |
| `width` | `width` | Width of the slider | `string` | `'100%'` |


## Events
Expand Down

0 comments on commit d6437c4

Please sign in to comment.