Add handleSize prop

Author: oguzhaninan

CHANGELOG.md

@@ -1,5 +1,10 @@
 # ChangeLog
 
+## v0.3.5
+
+### New Features
+- Added handle size prop
+
 ## v0.3.3
 
 ### Bug Fix

README.md

@@ -82,10 +82,11 @@ handleColor|string|#ffffff|Slider handle color
 gridTextColor|string|silver|Primary color
 fontFamily|string|'Arial, sans-serif'|Set text font family
 fontSize|number|12|Set text font size
+handleSize|number|26|Slider handle size
 histSliderGap|number|6|Set gap between slider and histogram
 updateColorOnChange|boolean|true|Update histogram bar color on change **(recommended false for performance)**
 
-## Event
+## 🔧 Event
 Name|Description
 ---|---
 start |Triggers when slider start.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-histogram-slider",
   "description": "Range slider with histogram for vue.js",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "main": "dist/histogram-slider.umd.min.js",
   "license": "GPL-3.0",
   "repository": {

src/App.vue

@@ -9,6 +9,7 @@
       :prettify="prettify"
       :clip="true"
       :drag-interval="true"
+      :hideFromTo="true"
       @finish="finish"
       :force-edges="false"
       :colors="['#4facfe', '#00f2fe']"

src/lib/HistogramSlider.vue

@@ -42,6 +42,7 @@ export default {
         --font-family: ${this.fontFamily};
         --font-size: ${this.fontSize};
         --hist-slider-gap: ${-36 + this.histSliderGap}px;
+        --handle-size: ${this.handleSize}px;
       `;
     }
   },
@@ -430,12 +431,12 @@ export default {
 
 .irs--round .irs-handle {
   cursor: pointer;
-  top: 30px;
-  width: 16px;
-  height: 16px;
-  /* border: 4px solid #006cfa; */
+  top: calc(50% - var(--handle-size) / 2 + 5px);
+  width: var(--handle-size);
+  height: var(--handle-size);
   background-color: var(--handle-color);
-  border-radius: 18px;
+  z-index: 9;
+  border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
 }
 

src/lib/props.js

@@ -131,5 +131,9 @@ export default {
   updateColorOnChange: {
     type: Boolean,
     default: true
+  },
+  handleSize: {
+    type: Number,
+    default: 26
   }
 };

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  devServer: {
+    port: 8000
+  }
+};