Range slider with histogram for Vue.js

Range slider with histogram for Vue.js

Range slider with histogram for Vue.js .Quick Start. If you are a try and learn developer, you can start trying the vue-histogram-slider now using codesandbox.io. histogram-slider-demo

Range slider with histogram for Vue

🚀 Quick Start

If you are a try and learn developer, you can start trying the vue-histogram-slider now using codesandbox.io.

Edit Vue Histogram Slider



yarn add vue-histogram-slider


npm i vue-histogram-slider

🔧 Usage

import Vue from 'vue';
import HistogramSlider from 'vue-histogram-slider';
import 'vue-histogram-slider/dist/histogram-slider.css';

Vue.component(HistogramSlider.name, HistogramSlider);


Property Type Default Description
min number 1 Set slider minimum value
max number 100 Set slider maximum value
data array - Data for histogram
block boolean false Locks slider and makes it inactive
grid boolean true Enables grid of values.
gridNum number 4 Number of grid units.
step number 1 Set sliders step. Always > 0. Could be fractional.
hideMinMax boolean true Hides min and max labels
hideFromTo boolean false Hides from and to labels
toFixed boolean false Fix position of right handle.
fromFixed boolean false Fix position of left (or single) handle.
forceEdges boolean false Slider will be always inside it's container.
dragInterval boolean false Allow user to drag whole range. Only in double type
keyboard boolean true Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
type string double Choose slider type, could be single - for one handle, or double for two handles
width number 600 width of dialog
barHeight number 100 Set max histogram bar height
barWidth number 6 Set histogram bar width
barGap number 5 Set histogram bar gap
barRadius number 4 Set histogram bar radius
prettify function null Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.
lineHeight number 6 Set slider line height
transitionDuration number 100 Set duration to histogram bars
primaryColor string #0091ff Primary color
labelColor string #0091ff Label color
holderColor string #dee4ec Holder color
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

Name Description
start Triggers when slider start.
change Triggers when each values change.
update Triggers when slider is modified by external methods update or reset.
finish Triggers when user releases handle.



vuejs javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate