From 7c274fa90106edd2aaab58125f8ba82ac5a07573 Mon Sep 17 00:00:00 2001 From: Mark Vadeika Date: Sat, 19 Jun 2021 02:21:37 -0400 Subject: [PATCH] added dragging --- README.md | 6 ++++++ yarn.lock | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) diff --git a/README.md b/README.md index 980abb6..d03e03f 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ A highly customizable React toggle slider component. +![default](https://user-images.githubusercontent.com/20135416/122633007-293cda80-d0a4-11eb-90e9-86b1cce29061.gif) +![square](https://user-images.githubusercontent.com/20135416/122632977-03173a80-d0a4-11eb-9ada-ba742ddf5aba.gif) + + ## Installation Install using NPM: @@ -37,6 +41,7 @@ The slider works without any options, but it can be heavily customized. | Option | Default | Description | | ------------- | ------------- | ------------- | | `active` | `false` | Initial state | +| `draggable` | `true` | Whether or not the handle can be dragged | | `onToggle` | `undefined` | Function to call when slider is toggled, passes active state as parameter | | `padding` | `5` | Padding between the handle and the sides of the bar | | `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. | `barBackgroundColor` | `#dedede` | Background color of the bar | | `barBackgroundColorActive` | `#06b7e7` | Background color of the bar while active | | `barTransitionDuration` | `undefined` | Transition duration of the bar (overrides `transitionDuration`) | +| `barTransitionType` | `fade` | Specify if the bar should `fade` or `slide` | | `barStyles` | `undefined` | Extra styles object to be applied to the bar | | `barStylesActive` | `undefined` | Extra styles object to be applied to the bar while active | | `barRenderer` | `undefined` | React node to completely replace the bar | diff --git a/yarn.lock b/yarn.lock index 3442135..a46bc29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28,11 +28,68 @@ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275" integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA== +almost-equal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd" + integrity sha1-+FHGMROHV5lCdqou++jfowZszN0= + +clamp@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634" + integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ= + +color-interpolate@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/color-interpolate/-/color-interpolate-1.0.5.tgz#d5710ce4244bd8b9feeda003f409edd4073b6217" + integrity sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA== + dependencies: + clamp "^1.0.1" + color-parse "^1.2.0" + color-space "^1.14.3" + lerp "^1.0.3" + +color-name@^1.0.0: + version "1.1.4" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" + integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== + +color-parse@^1.2.0: + version "1.4.2" + resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.2.tgz#78651f5d34df1a57f997643d86f7f87268ad4eb5" + integrity sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA== + dependencies: + color-name "^1.0.0" + +color-space@^1.14.3: + version "1.16.0" + resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.16.0.tgz#611781bca41cd8582a1466fd9e28a7d3d89772a2" + integrity sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg== + dependencies: + hsluv "^0.0.3" + mumath "^3.3.4" + csstype@^3.0.2: version "3.0.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw== +hsluv@^0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c" + integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw= + +lerp@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/lerp/-/lerp-1.0.3.tgz#a18c8968f917896de15ccfcc28d55a6b731e776e" + integrity sha1-oYyJaPkXiW3hXM/MKNVaa3Med24= + +mumath@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.4.tgz#48d4a0f0fd8cad4e7b32096ee89b161a63d30bbf" + integrity sha1-SNSg8P2MrU57Mglu6JsWGmPTC78= + dependencies: + almost-equal "^1.1.0" + typescript@^4.3.2: version "4.3.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"