react-custom-slider - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/index.js

@@ -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,

dist/index.modern.js

@@ -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,

package.json

 {
   "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",

README.md

@@ -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 | |

No alert changes

Improved metrics

Total package byte prevSize

91103

1.62%

Lines of code

772

0.78%

Number of lines in readme file

92

3.37%

No dependency changes