nightcatsama / vue-slider-component Goto Github PK

Nuxtjs always return document is not defined.
Can you show me example?
Pleas:3

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?

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.

and the function:

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?

It'd be nice if you could add swipe support for all touch devices.

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

The tooltips are broken in Internet Explorer (9, 10, and 11), because of calc() nested expressions in translate.

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>

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?

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

有需求是鼠标滚轮滚动的时候，滚动条指针也跟着滚动，不过好像这个功能没有实现呢？

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>`

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.

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.

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

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"....

Hi! It will be very helpful to have type declarations inside the repository for typescript projects.

I am trying to figure out how update a data value when the component value is changed. Other components incorporate a @input or @change or something where I can put in the name of the vue function to be called when a change in value has been made. Is therefore such an option?

拖动一点，就会变成0或者100，然后不可滑动，
错误提示会提示这个
TypeError: Cannot read property 'addEventListener' of undefined
TypeError: Cannot read property 'offsetWidth' of undefined

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.

如题

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.

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....

in the documentation it says real-time, however you use realTime.

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

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.

我发现不设置默认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.

If I change the max value, the position of the slider won't be changed. This results in two problems:

1. The position of the slider doesn't represent the correct value.
2. If the 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?

I think tooltips should not be overleaped even if points on same place or very near each other. They should be shifts as on attached img:

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.

（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

Hey, so I find the piecewise slider very very useful. Will you add labels that are visible before the user selects a step?
Like this:

Thanks for the nice component, Is it possible to provide a prop in order to support RTL UI interfaces?

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 ?

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!

父类节点如果使用transform: translate3d 这样的动画 会出现bug
例如 父节点 有动画

from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

这是时候 作为子元素的 拖动交互 会失效

经过测试 应该是动画引起的

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

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'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?

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?

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?

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!

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 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)
			}
		}

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

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.

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?

Please, add vueify transform to package.json, to vue-slider-component work with Browserify. This should be enough:

"browserify": {
  "transform": ["vueify"]
}

Thanks!