Skip to content

Commit 7c274fa

Browse files
added dragging
1 parent bfd653a commit 7c274fa

2 files changed

Lines changed: 63 additions & 0 deletions

File tree

README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
A highly customizable React toggle slider component.
66

7+
![default](https://user-images.githubusercontent.com/20135416/122633007-293cda80-d0a4-11eb-90e9-86b1cce29061.gif)
8+
![square](https://user-images.githubusercontent.com/20135416/122632977-03173a80-d0a4-11eb-9ada-ba742ddf5aba.gif)
9+
10+
711
## Installation
812

913
Install using NPM:
@@ -37,6 +41,7 @@ The slider works without any options, but it can be heavily customized.
3741
| Option | Default | Description |
3842
| ------------- | ------------- | ------------- |
3943
| `active` | `false` | Initial state |
44+
| `draggable` | `true` | Whether or not the handle can be dragged |
4045
| `onToggle` | `undefined` | Function to call when slider is toggled, passes active state as parameter |
4146
| `padding` | `5` | Padding between the handle and the sides of the bar |
4247
| `flip` | `false` | Handle starts of right instead of left |
@@ -56,6 +61,7 @@ The slider works without any options, but it can be heavily customized.
5661
| `barBackgroundColor` | `#dedede` | Background color of the bar |
5762
| `barBackgroundColorActive` | `#06b7e7` | Background color of the bar while active |
5863
| `barTransitionDuration` | `undefined` | Transition duration of the bar (overrides `transitionDuration`) |
64+
| `barTransitionType` | `fade` | Specify if the bar should `fade` or `slide` |
5965
| `barStyles` | `undefined` | Extra styles object to be applied to the bar |
6066
| `barStylesActive` | `undefined` | Extra styles object to be applied to the bar while active |
6167
| `barRenderer` | `undefined` | React node to completely replace the bar |

yarn.lock

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,68 @@
2828
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
2929
integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
3030

31+
almost-equal@^1.1.0:
32+
version "1.1.0"
33+
resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd"
34+
integrity sha1-+FHGMROHV5lCdqou++jfowZszN0=
35+
36+
clamp@^1.0.1:
37+
version "1.0.1"
38+
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
39+
integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
40+
41+
color-interpolate@^1.0.5:
42+
version "1.0.5"
43+
resolved "https://registry.yarnpkg.com/color-interpolate/-/color-interpolate-1.0.5.tgz#d5710ce4244bd8b9feeda003f409edd4073b6217"
44+
integrity sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA==
45+
dependencies:
46+
clamp "^1.0.1"
47+
color-parse "^1.2.0"
48+
color-space "^1.14.3"
49+
lerp "^1.0.3"
50+
51+
color-name@^1.0.0:
52+
version "1.1.4"
53+
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
54+
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
55+
56+
color-parse@^1.2.0:
57+
version "1.4.2"
58+
resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.2.tgz#78651f5d34df1a57f997643d86f7f87268ad4eb5"
59+
integrity sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==
60+
dependencies:
61+
color-name "^1.0.0"
62+
63+
color-space@^1.14.3:
64+
version "1.16.0"
65+
resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.16.0.tgz#611781bca41cd8582a1466fd9e28a7d3d89772a2"
66+
integrity sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg==
67+
dependencies:
68+
hsluv "^0.0.3"
69+
mumath "^3.3.4"
70+
3171
csstype@^3.0.2:
3272
version "3.0.8"
3373
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
3474
integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
3575

76+
hsluv@^0.0.3:
77+
version "0.0.3"
78+
resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c"
79+
integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw=
80+
81+
lerp@^1.0.3:
82+
version "1.0.3"
83+
resolved "https://registry.yarnpkg.com/lerp/-/lerp-1.0.3.tgz#a18c8968f917896de15ccfcc28d55a6b731e776e"
84+
integrity sha1-oYyJaPkXiW3hXM/MKNVaa3Med24=
85+
86+
mumath@^3.3.4:
87+
version "3.3.4"
88+
resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.4.tgz#48d4a0f0fd8cad4e7b32096ee89b161a63d30bbf"
89+
integrity sha1-SNSg8P2MrU57Mglu6JsWGmPTC78=
90+
dependencies:
91+
almost-equal "^1.1.0"
92+
3693
typescript@^4.3.2:
3794
version "4.3.2"
3895
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"

0 commit comments

Comments
 (0)