Range Slider Component With Histogram for Vue.js

vue-histogram-slider is a nice range slider component for selecting a range of numeric data just like a graph.

vue range slider codesandbox, vue histogram slider, react histogram slider, vue slider component, vue double range slider, range slider for vue js, vue js price range slider

histogram-slider-jquery

How to make use of it:

Install & Download:

yarn
yarn add vue-histogram-slider

npm
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);
<HistogramSlider
    :width="600"
    :bar-height="100"
    :data="data"
/>

📋 Props

PropertyTypeDefaultDescription
minnumber1Set slider minimum value
maxnumber100Set slider maximum value
dataarrayData for histogram
blockbooleanfalseLocks slider and makes it inactive
gridbooleantrueEnables grid of values.
gridNumnumber4A number of grid units.
stepnumber1Set sliders step. Always > 0. Could be fractional.
hideMinMaxbooleantrueHides min and max labels
hideFromTobooleanfalseHides from and to labels
toFixedbooleanfalseFix position of right handle.
fromFixedbooleanfalseFix the position of the left (or single) handle.
forceEdgesbooleanfalseA slider will be always inside its container.
dragIntervalbooleanfalseAllow user to drag the whole range. Only in double type
keyboardbooleantrueActivates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
typestringdoubleChoose slider type, which could be single – for one handle, or double for two handles
widthnumber600width of dialog
barHeightnumber100Set max histogram bar height
barWidthnumber6Set histogram bar width
barGapnumber5Set histogram bar gap
barRadiusnumber4Set histogram bar radius
prettifyfunctionnullSet up your own prettify function. Can be anything. For example, you can set up Unix time as slider values and then transform them into cool-looking dates.
lineHeightnumber6Set slider line-height
transitionDurationnumber100Set the duration to histogram bars
primaryColorstring#0091ffPrimary color
labelColorstring#0091ffLabel color
holderColorstring#dee4ecHolder color
handleColorstring#ffffffSlider handle color
gridTextColorstringsilverPrimary color
fontFamilystring‘Arial, sans-serif’Set text font family
fontSizenumber12Set text font size
handleSizenumber26Slider handle size
histSliderGapnumber6Set gap between slider and histogram
updateColorOnChangebooleantrueUpdate histogram bar color on change (recommended false for performance)

🔧 Event

NameDescription
startTriggers when slider starts.
changeTriggers when each value change.
updateTriggers when the slider is modified by external methods update or reset.
finishTriggers when user releases handle.

Mobile-friendly Range Slider Control Component for Angular 6+

Beautiful Histogram Range Slider Component, vue-histogram-slider Plugin/Github


See Demo And Download

Official Website(oguzhaninan): Click Here

This superior jQuery/javascript plugin is developed by oguzhaninan. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…