@startupjs-ui/range-input 0.1.13 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/README.mdx +10 -8
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/range-input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @startupjs-ui/range-input
|
package/README.mdx
CHANGED
|
@@ -4,7 +4,9 @@ import { Sandbox } from '@startupjs-ui/docs'
|
|
|
4
4
|
|
|
5
5
|
# RangeInput
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
A slider control that lets users select a value (or a range of values) by dragging a marker along a track. Pass `value` and `onChange` to control it. Use `min` (defaults to `0`) and `max` (defaults to `100`) to define the range.
|
|
8
|
+
|
|
9
|
+
The component also supports style overrides for individual parts: `containerStyle`, `trackStyle`, `selectedStyle`, `markerStyle`, `stepStyle`, `stepLabelStyle`, and `stepMarkerStyle`. Use `customLabel` to replace the default marker label component, or `onChangeStart` and `onChangeFinish` to respond to the start and end of a drag gesture.
|
|
8
10
|
|
|
9
11
|
```jsx
|
|
10
12
|
import { RangeInput } from 'startupjs-ui'
|
|
@@ -27,7 +29,7 @@ return (
|
|
|
27
29
|
|
|
28
30
|
## Two markers
|
|
29
31
|
|
|
30
|
-
By default component has one marker.
|
|
32
|
+
By default the component has one marker. Set `range` to `true` to enable two markers, allowing users to select a value range. When `range` is enabled, `value` should be an array of two numbers.
|
|
31
33
|
|
|
32
34
|
```jsx example
|
|
33
35
|
const [value, setValue] = useState([20, 60])
|
|
@@ -45,7 +47,7 @@ return (
|
|
|
45
47
|
|
|
46
48
|
## Hide marker label
|
|
47
49
|
|
|
48
|
-
|
|
50
|
+
Set `showLabel` to `false` to hide the label that appears above the marker while it is being dragged. It defaults to `true`.
|
|
49
51
|
|
|
50
52
|
```jsx example
|
|
51
53
|
const [value, setValue] = useState(40)
|
|
@@ -63,7 +65,7 @@ return (
|
|
|
63
65
|
|
|
64
66
|
## Step
|
|
65
67
|
|
|
66
|
-
|
|
68
|
+
The `step` prop defines the increment between selectable values (defaults to `1`). It cannot be negative. We recommend that `max - min` be evenly divisible by the step.
|
|
67
69
|
|
|
68
70
|
```jsx example
|
|
69
71
|
const [value, setValue] = useState(30)
|
|
@@ -79,9 +81,9 @@ return (
|
|
|
79
81
|
)
|
|
80
82
|
```
|
|
81
83
|
|
|
82
|
-
## Show labels and markers for
|
|
84
|
+
## Show labels and markers for steps
|
|
83
85
|
|
|
84
|
-
|
|
86
|
+
Set `showSteps` to `true` to display labels and tick markers at each step along the track.
|
|
85
87
|
|
|
86
88
|
```jsx example
|
|
87
89
|
const [value, setValue] = useState(4)
|
|
@@ -97,7 +99,7 @@ return (
|
|
|
97
99
|
)
|
|
98
100
|
```
|
|
99
101
|
|
|
100
|
-
When
|
|
102
|
+
When `showSteps` is enabled, you can selectively hide the step labels or step markers by setting `showStepLabels` or `showStepMarkers` to `false`. Both default to `true`.
|
|
101
103
|
|
|
102
104
|
**Hide labels**
|
|
103
105
|
|
|
@@ -136,7 +138,7 @@ return (
|
|
|
136
138
|
|
|
137
139
|
## Width
|
|
138
140
|
|
|
139
|
-
Use `width`
|
|
141
|
+
Use the `width` prop to specify a custom width for the slider in pixels. It defaults to `280`.
|
|
140
142
|
|
|
141
143
|
```jsx example
|
|
142
144
|
const [value, setValue] = useState(30)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/range-input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@ptomasroos/react-native-multi-slider": "github:ptomasroos/react-native-multi-slider#368a0e8a67a595a84f411ea394b471a43ad8e7a4",
|
|
12
12
|
"@startupjs-ui/core": "^0.1.11",
|
|
13
|
-
"@startupjs-ui/div": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
13
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.16"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
22
22
|
}
|