Press "Enter" to skip to content

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.