Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
multi-range-slider-vue
Advanced tools
Readme
A vue component that accept values in props and return changed values in @input event
View Demo - codesandbox
View Demo - gh-pages
props | type | default | description |
---|---|---|---|
min | Number | 0 | Slider Minimum Value that user can set |
max | Number | 100 | Slider Maximum Value that user can Set |
minValue | Number | 25 | Slider range selected minimum value that will show default selected |
maxValue | Number | 75 | Slider range selected maximum value that will show default selected |
step | Number | 1 | Slider change value that will change when bar clicked or keyboard arrow key pressed |
rangeMargin | Number | step | Slider minValue and maxValue minimum difference. user cannot select less than rangeMargin value. If not specified then step value is min range. If rangeMargin is set to zero then user can select same minValue and maxValue |
preventWheel | Boolean | false | true then it not accept mouse wheel to change its value. false then (shift + wheel) change minValue (ctrl+wheel) change maxValue, (ctrl+shift+wheel) change both values |
ruler | Boolean | true | is ruler visible or not. sub-ruler is display when labels are set and step not equal to 1. |
label | Boolean | true | is label visible or not |
labels | Array | [ ] | list of label text display on ruler. If not set then min-max value show in label |
minCaption | String | "" | Display on Min-Thumb tool-tip caption text. if not passed then minValue will display. |
maxCaption | String | "" | Display on Max-Thumb tool-tip caption text. if not passed then maxValue will display. |
baseClassName | String | "multi-range-slider" | you can write your css or modify css file and apply that class. Example : "multi-range-slider-black" |
keyboard shortcut | Description |
---|---|
Shift+Wheel | increment/decrement min value |
Ctrl+Wheel | increment/decrement max value |
Ctrl+Shift+Wheel | increment/decrement both values |
Left Arrow Key | decrement selected slider thumb min/max value |
Right Arrow Key | increment selected slider thumb min/max value |
copy following code and run on CLI
npm install multi-range-slider-vue
Example Code
template sectioln
<MultiRangeSlider
:baseClassName="multi-range-slider"
:min="0"
:max="100"
:step="10"
:ruler="true"
:label="true"
:minValue="barMinValue"
:maxValue="barMaxValue"
@input="UpdateValues"
/>
script section
import MultiRangeSlider from "multi-range-slider-vue";
components section
components: {
MultiRangeSlider
},
data section
data() {
return {
barMinValue: 10,
barMaxValue: 90
};
},
methods section
methods: {
UpdateValues(e) {
this.barMinValue = e.minValue;
this.barMaxValue = e.maxValue;
}
}
View Demo - codesandbox
View Demo - gh-pages
FAQs
A component create range slider that have two values minValue and maxValue that can be set in props and get on @input event in addition min, max, step, ... etc. see ReadMe
The npm package multi-range-slider-vue receives a total of 1,773 weekly downloads. As such, multi-range-slider-vue popularity was classified as popular.
We found that multi-range-slider-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.