react-custom-slider
Advanced tools
Comparing version 1.0.7 to 1.0.8
@@ -26,3 +26,2 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
var Slider = function Slider(props) { | ||
var labelpaddingVertical = 2; | ||
var defaultValue = props.defaultValue, | ||
@@ -33,2 +32,3 @@ value = props.value, | ||
valueLabelActiveColor = props.valueLabelActiveColor, | ||
valueLabelPadding = props.valueLabelPadding, | ||
valueLabelStyle = props.valueLabelStyle, | ||
@@ -194,2 +194,3 @@ min = props.min, | ||
style: _extends({}, styles.trackFill, { | ||
borderRadius: trackShape === 'rounded' ? track_radius : 0, | ||
left: handlerWidth_radius | ||
@@ -232,7 +233,7 @@ }, !vertical ? { | ||
height: fontSize, | ||
padding: labelpaddingVertical, | ||
padding: valueLabelPadding, | ||
border: "1px solid " + handlerColor | ||
}, valueLabelStyle, !vertical ? { | ||
left: handlerWidth_radius + (handler_position !== null ? handler_position : step * stepWidth), | ||
top: !invertMarkers ? handler_height + markersSize : -markersSize - 2, | ||
top: !invertMarkers ? handler_height + markersSize + valueLabelPadding - 2 : -markersSize - valueLabelPadding - 1, | ||
transform: "translate(-50%," + (!invertMarkers ? -100 : 0) + "%)" | ||
@@ -242,5 +243,5 @@ } : _extends({ | ||
}, !invertMarkers ? { | ||
left: handler_width + markersSize + 2 | ||
left: handler_width + markersSize + valueLabelPadding | ||
} : { | ||
right: handler_width + markersSize + 2 | ||
right: handler_width + markersSize + valueLabelPadding | ||
}, { | ||
@@ -335,2 +336,3 @@ transform: "translate(" + (!invertMarkers ? -100 : 100) + "%, 50%)" | ||
valueLabelActiveColor: '#4c61ff', | ||
valueLabelPadding: 4, | ||
valueLabelStyle: { | ||
@@ -380,2 +382,3 @@ color: '#fff' | ||
valueLabelActiveColor: PropTypes.string, | ||
valueLabelPadding: PropTypes.number, | ||
valueLabelStyle: PropTypes.object, | ||
@@ -382,0 +385,0 @@ min: PropTypes.number, |
@@ -23,3 +23,2 @@ import React, { useRef, useState, useMemo, useCallback } from 'react'; | ||
var Slider = function Slider(props) { | ||
var labelpaddingVertical = 2; | ||
var defaultValue = props.defaultValue, | ||
@@ -30,2 +29,3 @@ value = props.value, | ||
valueLabelActiveColor = props.valueLabelActiveColor, | ||
valueLabelPadding = props.valueLabelPadding, | ||
valueLabelStyle = props.valueLabelStyle, | ||
@@ -191,2 +191,3 @@ min = props.min, | ||
style: _extends({}, styles.trackFill, { | ||
borderRadius: trackShape === 'rounded' ? track_radius : 0, | ||
left: handlerWidth_radius | ||
@@ -229,7 +230,7 @@ }, !vertical ? { | ||
height: fontSize, | ||
padding: labelpaddingVertical, | ||
padding: valueLabelPadding, | ||
border: "1px solid " + handlerColor | ||
}, valueLabelStyle, !vertical ? { | ||
left: handlerWidth_radius + (handler_position !== null ? handler_position : step * stepWidth), | ||
top: !invertMarkers ? handler_height + markersSize : -markersSize - 2, | ||
top: !invertMarkers ? handler_height + markersSize + valueLabelPadding - 2 : -markersSize - valueLabelPadding - 1, | ||
transform: "translate(-50%," + (!invertMarkers ? -100 : 0) + "%)" | ||
@@ -239,5 +240,5 @@ } : _extends({ | ||
}, !invertMarkers ? { | ||
left: handler_width + markersSize + 2 | ||
left: handler_width + markersSize + valueLabelPadding | ||
} : { | ||
right: handler_width + markersSize + 2 | ||
right: handler_width + markersSize + valueLabelPadding | ||
}, { | ||
@@ -332,2 +333,3 @@ transform: "translate(" + (!invertMarkers ? -100 : 100) + "%, 50%)" | ||
valueLabelActiveColor: '#4c61ff', | ||
valueLabelPadding: 4, | ||
valueLabelStyle: { | ||
@@ -377,2 +379,3 @@ color: '#fff' | ||
valueLabelActiveColor: PropTypes.string, | ||
valueLabelPadding: PropTypes.number, | ||
valueLabelStyle: PropTypes.object, | ||
@@ -379,0 +382,0 @@ min: PropTypes.number, |
{ | ||
"name": "react-custom-slider", | ||
"version": "1.0.7", | ||
"version": "1.0.8", | ||
"description": "a very easy to use customizable slider for React", | ||
@@ -5,0 +5,0 @@ "author": "jonisapp", |
@@ -10,2 +10,4 @@ # react-custom-slider | ||
![sliders](https://github.com/jonisapp/react-custom-slider/blob/master/images/sliders.jpg) | ||
## Install | ||
@@ -47,11 +49,12 @@ | ||
|------|------|-------------| | ||
| `value` | number (required) | controlled value | | ||
| `defaultValue` | number (required) | uncontrolled value | | ||
| `value` | number (required) | continuously updated value | | ||
| `defaultValue` | number (required) | initial value | | ||
| `showValue` | true, false, 'active' | displays current value on a label | | ||
| `valueLabelColor` | string | | | ||
| `valueLabelActiveColor` | string | | | ||
| `valueLabelPadding` | number | | | ||
| `valueLabelStyle` | object | user custom style for value label | | ||
| `min` | number | min slider value | | ||
| `max` | number | max slider value | | ||
| `stepSize` | number | interval between 2 steps | | ||
| `stepSize` | number | interval between 2 steps (default is 1) | | ||
| `disabled` | boolean | | | ||
@@ -62,3 +65,3 @@ | `disabledColor` | string | color used when the slider is disabled | | ||
| `valueRenderer` | function (callback) | used by value label (to display a unit such as %) | | ||
| `trackLength` | number | | | ||
| `trackLength` | number | track's height or width (depending on the orientation) | | ||
| `trackColor` | string | | | ||
@@ -65,0 +68,0 @@ | `trackThickness` | number | | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
91103
772
92