nightcatsama / vue-slider-component Goto Github PK
View Code? Open in Web Editor NEW🌡 A highly customized slider component
Home Page: https://nightcatsama.github.io/vue-slider-component
License: MIT License
🌡 A highly customized slider component
Home Page: https://nightcatsama.github.io/vue-slider-component
License: MIT License
我发现不设置默认value会造成设置max和width无效,max会一直为120,width会出现莫名奇妙的宽度
Actually, I created a slider with range control (which means the value
is an Array) and put it into a pre-defined grid system layout, but it didn't display normally, the two sliders overlapped at the begin (the position of range minimum value), but the background element shows the normal width.
In fact, I suspect the default width of my slider is the width of its container's width, as I found the description in README, so I went to check my container's width and re-defined it to a absolute value (300px or so), but the abnormal things still exists. So I didn't think it's a problem of my bad container's width initialization styles.
The interesting thing is that when I resize the screen, the sliders will update to the normal position (Maybe there is some special tricks running in the resize operation).
I thought if there is any constraints when I initialize the component?
The abnormal effect shows like below:
While the normal effect should shows like below:
Thanks a lot.
I use it in my template file like this:
import vueSlider from 'vue-slider-component';
chrome console report error in /vue-slider-component/index.js:
index.js?81fc:1 Uncaught SyntaxError: Unexpected token import
so I import like tihs:
import vueSlider from 'vue-slider-component/vue2-slider.vue';
there is no error,and the slider appeared.but i set max,min props doesn't work.
`import vueSlider from 'vue-slider-component/vue2-slider.vue';
export default {
components: {
vueSlider
},
data() {
return {
height: 10,
min: 1,
max: 5,
val: 2
}
},
methods: {
getValue(value) {
/* Two-way */
this.val = value
},
setValue(num) {
this.val = num
}
}
}
</script>`
Hi, first of all thank you for the nice slider component :).
There is a problem when the slider is initiated with display:none
, as shown in the attached image. When the slider appears it cannot be interacted.
I found a quick fix, when the window is resized the component works again, so I have to manually call window.dispatchEvent(new Event('resize'))
I have object slider with interval attribute equals 100.
And some config
watch: {
price_low (val) {
this.input_price_low = Math.ceil(val / this.sliderprops.interval) * this.sliderprops.interval;
},
price_high (val) {
this.input_price_high = Math.floor(val / this.sliderprops.interval) * this.sliderprops.interval;
},
price_min (val) {
this.price_min = Math.floor(val / this.sliderprops.interval) * this.sliderprops.interval;
},
price_max (val) {
this.price_max = Math.ceil(val / this.sliderprops.interval) * this.sliderprops.interval;
}
}
Everytime I reload page vue-slider always throw that error. Please help me fix it.
Hi :)
I'm currently trying to have 2 sliders work together. You can use them individually, or lock them together, so when you move the first, the second gets the same value.
You can compare it to noUiSlider Locked Example.
My function is a bit cheaper than noUI. I lock the second slider, and use the value from the first for both of them.
I have the following issue:
When I use click to change the value, the 2nd slider changes instantly. But when I drag the first slider, the second has a big delay.
I'll attach my settings and my function.
both sliders have the same settings.
Thanks for this amazing component!
I have a warning in console:
[Vue-slider warn]: Prop[interval] is illegal, Please make sure that the interval can be divisible
My parameters are:
'min': 0,
'max': 4,
'interval': 0.1
What am I doing wrong?
Thanks for your help!
Problem is, when you'll try to manually change value from ['0','0'] value to '0', seems like slider
property will be computed earlier then template will rerender and refs
will not appear in $refs var, so slider
will be set to undefined :(
I tried many ways but didn't find a working solution (except rerendering whole slider). May be you have one?
Hi....
in the documentation it says real-time, however you use realTime.
In the parent component that uses vue-slider I'm getting:
TypeError: undefined is not an object (evaluating 'this.$refs.process.offsetWidth')
at webpack:///~/vue-slider-component/dist/index.js:1:0
Did anyone encounter something similar? I'm using vue-slider-component version 2.2.7
Thinking out loud here. If we have 2 sliders that are bound to the same value, lets say one for mobile layout and one for desktop. If one changes, should the other emit a callback
?
Because a weird side effect would be that both sliders emit an event.
What I mean is, we should emit a callback event only when the user triggers a change, or at least that should be by default.
Maybe I am wrong? Let me know what you think.
I don't understand any of the following: webpack, es6, browserify, import, babel
Also, I am deploying my app on firebase, so I don't have control over the server.
Is it possible to use this widget via the <script> tag with ES5? Could you include an example of this? I can't figure out how to make it work.
my code is only this one:
<vue-slider v-model="value" :min="0" :max="100"> </vue-slider>
data () { return { value: 0, }
i got an error: Cannot read property 'offsetWidth' of undefined
I was having a problem with refresh() being called after navigating from a component using vue-slider-component.
I got the console warnings to go away by doing this, but it seems that the slider is not being destroyed when navigating away using vue-router.
Not sure if this is an issue for you or Vue Router.
refresh() {
if(this.$refs.elem){
this.getStaticData()
this.setPosition(0)
}
}
Hi, in the method isMobile
, if you want, can you improve regex test?
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test((navigator.userAgent||navigator.vendor||window.opera))
||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4))
Maybe only first row can help, but if you want you can add also the second.
Congrats on the wonderful slider. I have been looking for a vuejs based range slider and this looks like a perfect solution except that it does not support non linear sliders. Non linear support would be a great addition to this component!
A non linear slider allowing you to e.g have a slider from 0 to 20,000,000 while half the slider allowing you to span between 0 and 2,000 while the rest from 1,000 to 20,000,000 this is useful for a real estate website price range sliders to cover both low price ranges for rentals and high price ranges for sales.
Here is how this is covered by other sliders (not vue based but jquery based)
http://egorkhmelev.github.io/jslider/
look at heterogeneity example
http://refreshless.com/nouislider/slider-values/#section-non-linear
look at the non linear example
I can't seem to figure this out. Have you ever had the problem with a lag between the time you click the slider node and it registers the move?
Sorry for the vague details but it is hard to reproduce this.
(version 1.x)in my application, ready function
this.size = this.direction === 'vertical' ? this.$els.elem.offsetHeight : this.$els.elem.offsetWidth
the size is 0, maybe the dom is not ready
有需求是鼠标滚轮滚动的时候,滚动条指针也跟着滚动,不过好像这个功能没有实现呢?
Hi, great component!
I've noticed an issue, maybe I am missing something...
If I set a slider value
higher than the max
value, the dot position is not restricted to the max value and breaks out of the slider.
How can I restrict it to the max?
It would be great if it worked the same as the HTML input range - i.e. the value can still be set higher than the maximum, but the dot position is restricted to the maximum width.
Thanks, Nic
The tooltips are broken in Internet Explorer (9, 10, and 11), because of calc()
nested expressions in translate
.
Thanks for the nice component, Is it possible to provide a prop in order to support RTL UI interfaces?
Hello,
First of all, thank you for an amazing component!
After updating package, I'm getting the next error in my console:
index.js?e15c:1 GET https://xxx.xxx/undefined 404 (Not Found)
I looks like there is a problem with getStaticData:
https://cl.ly/2O1O3K3U2u1e
// ./~/vue-slider-component/dist/index.js
It happens when I re-render dashboard that includes sliders. Everything was working properly before update, no changes in my code.
Can you please check getStaticData and let me know if I'm doing something wrong?
Thank you!
It'd be nice if you could add swipe support for all touch devices.
Hi !
This is a really nice component. I really enjoy using it.
Unfortunately I'm not able to make it run properly on touch device. It works on mobile but not on desktop computer with a touch enable device.
On one side I test : http://hammerjs.github.io/ which works perfectly on the same touch enabled device.
On the other side I test vue-slider-component and I'm not able to drag the dot.
What could I do to debug this ?
Thanks,
I've just pulled this into an existing project, and this is the first error:
error in ./~/vue-slider-component/dist/index.js
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "C:\\projects\\vpt\\node_modules\\vue-slider-component\\.babelrc" at 0, attempted to resolve relative to "C:\\projects\\vpt\\node_modules\\vue-slider-component"
at C:\projects\vpt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (C:\projects\vpt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (C:\projects\vpt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (C:\projects\vpt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\projects\vpt\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\projects\vpt\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\projects\vpt\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\projects\vpt\node_modules\babel-loader\lib\index.js:46:20)
at C:\projects\vpt\node_modules\babel-loader\lib\fs-cache.js:79:18
at ReadFileContext.callback (C:\projects\vpt\node_modules\babel-loader\lib\fs-cache.js:15:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:358:13)
The build env is Windows 10, and running webpack bundler
Hey,
directly binding values doesnt seem to work?
like inlining
<vue-slider v-bind={ 'min': 0,'max': 200,'interval': 50}>
Am i doing something wrong or is this not supported?
Thanks
Hi! It will be very helpful to have type declarations inside the repository for typescript projects.
拖动一点,就会变成0或者100,然后不可滑动,
错误提示会提示这个
TypeError: Cannot read property 'addEventListener' of undefined
TypeError: Cannot read property 'offsetWidth' of undefined
I'd like to add this project to WebJars but in order to do that a release commit is needed. Do you plan on making a release?
Nuxtjs always return document is not defined.
Can you show me example?
Pleas:3
Using costum data, required space on values and it was breaking the element, had to use "\xa0" to use space. Just leaving this here in case some one has the same problem, amazing library! ^^
:data=["1\xa0mês","2\xa0meses"....
As described in #16 I asked for a disablement of the start animation. In 2.1.2 it was resolved, but in 2.1.7 it's back.
Is it possible to disable it via an option?
If I change the max
value, the position of the slider won't be changed. This results in two problems:
max
value has been changed before clicking on the slider the slider will update. This results in unpredictable value changes.Example:
Let's imagine there is a slider-component with min=0
and max=100
. I set the slider to 50
.
Then I set max=50
. As you can see the slider didn't change (visually).
If I now just click on the slider it would change the value to 25
.
Do you have a solution for this problem?
such as:
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
so import
export
in https://github.com/NightCatSama/vue-slider-component/blob/master/index.js will throw an error in browser
Hi. I need to do some ajax requests on change and I tried using the @callback
but it gets fired 2 times on initial load of the slider. Is this a normal behaviour or something with me is triggering the change?
如题
父类节点如果使用transform: translate3d 这样的动画 会出现bug
例如 父节点 有动画
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
这是时候 作为子元素的 拖动交互 会失效
经过测试 应该是动画引起的
I'm receiving an error in IE11. Chrome, Safari, Firefox work fine.
Here's my code:
<!-- MyComponent.vue -->
// html
<vue-slider v-bind="pastAttempts" v-model="pastAttempts.value"></vue-slider>
// inside my data...
pastAttempts: {
width: '100%',
tooltip: 'always',
piecewise: true,
tooltipDir: 'bottom',
style: {
margin: '0 0 50px',
},
data: [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 'More than 10'
],
piecewiseStyle: {
backgroundColor: '#fff',
},
tooltipStyle: {
border: 'none'
},
value: 0
}
And here's the error that IE is showing:
Unable to get property 'style' of undefined or null reference
failed to compile template: <div ref=wrap :class="['vue-slider-wrap', flowDirection, disabledClass]" v-show=show :style=wrapStyles @click=wrapClick _v-29912c8e=""> <div ref=elem class=vue-slider :style="[elemStyles, bgStyle]" _v-29912c8e=""> <template v-if=isMoblie> <template v-if=isRange> <div ref=dot0 :class="[tooltipStatus, 'vue-slider-dot']" :style="[sliderStyles[0], dotStyles]" @touchstart=moveStart(0) _v-29912c8e=""> <span :class="[`vue-slider-tooltip-${tooltipDirection[0]}`, 'vue-slider-tooltip']" :style=tooltipStyles[0] _v-29912c8e="">{{ formatter ? formatting(val[0]) : val[0] }}</span> </div> <div ref=dot1 :class="[tooltipStatus, 'vue-slider-dot']" :style="[sliderStyles[1], dotStyles]" @touchstart=moveStart(1) _v-29912c8e=""> <span :class="[`vue-slider-tooltip-${tooltipDirection[1]}`, 'vue-slider-tooltip']" :style=tooltipStyles[1] _v-29912c8e="">{{ formatter ? formatting(val[1]) : val[1] }}</span> </div> </template> <template v-else=""> <div ref=dot :class="[tooltipStatus, 'vue-slider-d...
It seems to be related to this line:
this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",
Any idea of what might be happening?
Hi, there. I set the slider component with following params, which interval
is specified to 0.005:
{
width: "auto",
tooltip: 'hover',
min: 1,
max: 4,
interval: 0.005,
disabled: false,
clickable: false,
tooltipStyle: {
"backgroundColor": "#000",
"borderColor": "#000"
}
}
The appearance and operation is normal in the interface, but I found a error info in the console with [Vue-slider warn]: Prop[interval] is illegal, Please make sure that the interval can be divisible
.
I found the logic to judge the effectiveness of interval is (this.maximum - this.minimum) % this.interval !== 0
, and I think it may be not exactly right since the precision of JavaScript itself can not strictly support such operation's judgement? Such as some integer is JavaScript would be represented as a bug
number, 4 -> 4.0000000000000000003.
I think you can replace the division part to something else, such as modified the maximum value slightly according to user's interval setting. Hope the information can help you a little bit. Thanks for your effort in contributing in this component.
Please, add vueify transform to package.json
, to vue-slider-component work with Browserify. This should be enough:
"browserify": {
"transform": ["vueify"]
}
Thanks!
I want to add few sliders, but can't understand how to separate their values.
Examples show only putting all stuff to data, like:
data: {
value: 1,
max: 500
}
But I want to do something like:
data: {
price: {
value: 1,
max: 500
}
}
But how to bind nested value to slider?
If i use custom data, even though i use numbers in string, min and max value works...
i use this workaround
...
data: ["2017", "2016", "2015","2014"],
min: -9999,
max: 9999
....
There is any solution ?
When there are two or more sliders in the same template, and they have :drag-end="myFunc(flower)", events fire on every value change and on all sliders. So myFunc fires on all sliders.
I'm newbie in Vue, so, maybe, I'm doing something wrong.
<template>
<div>
<div v-for="flower in flowers">
<slider ref="slider" v-model="flower.value" :drag-end="myFunc(flower)"></slider>
</div>
<div v-for="tree in trees">
<slider ref="slider" v-model="tree.value" :drag-end="myFunc(tree)"></slider>
</div>
<div>
</template>
<script>
const Slider = require('../controls/slider.vue');
module.exports = {
methods: {
myFunc: function (plant) {
console.log("Plant value", plant.value);
},
},
components: {
Slider
},
mounted: function () {
},
data() {
return { }
}
}
</script>
Thanks for the great component!
One issue I have though is with altering the css. With the css scoped, I don't see a way to change the background-color
on the tooltip and the process bar (which are set at color #3498db). Any ideas on how this can be accomplished? Or am I left to fork the repo and adjust the css?
Is there a way to disable the startup animation? I added the slider to a component that can toggle visibility, but everytime when open/close the component the slider is animating. The max bullet moves to it's position.
I couldn't find it in the docs, that's why I'm asking it here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.