vue-bulma/slider

Slider Compoent for Vue Bulma

Slider

Slider component for Vue Bulma.

Installation

$ npm install vue-bulma-slider --save

Examples

<template>
  <div>
    <slider type="success" size="large" :value="value" :max="100" :step="1" is-fullwidth @change="update"></slider>
    <input class="input" type="number" v-model="value" min="0" max="100" number>
  </div>
</template>

<script>
import Slider from 'vue-bulma-slider'

export default {
  components: {
    Slider
  },

  data () {
    return {
      value: 23
    }
  },

  computed: {
    per () {
      return this.value + '%'
    }
  },

  methods: {
    update (val) {
      this.value = Number(val)
    }
  }

 }
</script>

Badges

---

fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

slider's Issues

Change event called twice when setting value prop

This is easily reproduceable. Whenever you set the value from parent (e.g vuex) @change, the change event gets called twice.

1- @change parent handler assigns new value prop, which triggers realValue change
2- v-model in child sets realValue as well

How do I fix this ?

Cannot resolve module 'sass-loader'

After installing via npm and adding import Slider from 'vue-bulma-slider' I get the following error:

ERROR in ./~/vue-bulma-slider/src/Slider.vue
Module not found: Error: Cannot resolve module 'sass-loader'

I guess sass-loader (and whatever else) needs to be added to the deps?

BUG: Min calculation

Hey don't know how to do pull request

PROBLEM: When you put minimum, the highlighted part of the slider does not follow the slider button.

SOLUTION:
Line 56, replace:

return this.realValue / this.max * 100 + '%'

with
return (this.realValue - this.min) / (this.max - this.min) * 100 + '%'

Appropriate loader issue

This is vue 2.1 issue

I am trying to use this component but I get some strange error while trying to use it with vue-cli webpack project.
The steps to reproduce the bug are:

1. vue init webpack-simple slider
2. cd slider
3. npm install
4. npm i -save bulma vue-bulma-slider
5. npm i --save-dev sass-loader node-sass
6. copy example code from README.md into App.vue
7. npm run dev

When I run the following configuration I get this error:

> cross-env NODE_ENV=development webpack-dev-server --open --inline --hot

Project is running at http://localhost:8081/
webpack output is served from /dist/
404s will fallback to /index.html
Hash: ca67478adfc2a67e57c8
Version: webpack 2.1.0-beta.28
Time: 2152ms
   Asset    Size  Chunks             Chunk Names
build.js  1.4 MB       0  [emitted]  main
chunk    {0} build.js (main) 489 kB [entry] [rendered]
    [0] ./~/inherits/inherits_browser.js 672 bytes {0} [built]
    [1] ./~/process/browser.js 5.3 kB {0} [built]
    [2] (webpack)/buildin/global.js 506 bytes {0} [built]
    [3] ./~/debug/src/browser.js 4.68 kB {0} [built]
    [4] ./~/sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
    [5] ./~/sockjs-client/lib/utils/url.js 975 bytes {0} [built]
    [6] ./~/json3/lib/json3.js 43.3 kB {0} [built]
    [7] ./~/sockjs-client/lib/utils/event.js 2 kB {0} [built]
    [8] ./~/sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
    [9] ./~/sockjs-client/lib/utils/random.js 746 bytes {0} [built]
   [10] ./~/sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]
   [11] ./~/sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
   [12] ./~/sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
   [13] ./~/sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
   [14] ./~/sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]
   [15] ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-f81412c6!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bulma-slider/src/Slider.vue 15.1 kB {0} [built]
   [16] ./~/sockjs-client/lib/event/event.js 477 bytes {0} [built]
   [17] ./~/sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
   [18] ./~/sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
   [19] ./~/sockjs-client/lib/utils/object.js 532 bytes {0} [built]
   [20] ./~/url-parse/index.js 9.92 kB {0} [built]
   [21] ./~/vue-hot-reload-api/index.js 3.07 kB {0} [built]
   [22] ./~/vue/dist/vue.common.js 219 kB {0} [built]
   [23] ./~/sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
   [24] ./~/sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
   [25] ./~/sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
   [26] ./~/sockjs-client/lib/location.js 177 bytes {0} [built]
   [27] ./~/sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
   [28] ./~/sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]
   [29] ./~/sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
   [30] ./~/sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
   [31] ./~/sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
   [32] ./~/sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]
   [33] ./~/sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
   [34] ./~/sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
   [35] ./~/sockjs-client/lib/version.js 26 bytes {0} [built]
   [36] (webpack)/buildin/module.js 548 bytes {0} [built]
   [37] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [38] ./src/main.js 134 bytes {0} [built]
   [39] (webpack)-dev-server/client?http://localhost:8081 4.66 kB {0} [built]
   [40] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
   [41] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [42] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-bulma-slider/src/Slider.vue 784 bytes {0} [built]
   [43] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 365 bytes {0} [built]
   [44] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
   [45] ./~/debug/src/debug.js 4.31 kB {0} [built]
   [46] ./~/events/events.js 8.33 kB {0} [built]
   [47] ./~/ms/index.js 2.72 kB {0} [built]
   [48] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [49] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
   [50] ./~/querystring-es3/encode.js 2.54 kB {0} [built]
   [51] ./~/querystring-es3/index.js 127 bytes {0} [built]
   [52] ./~/querystringify/index.js 1.3 kB {0} [built]
   [53] ./~/requires-port/index.js 753 bytes {0} [built]
   [54] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
   [55] ./~/sockjs-client/lib/event/close.js 295 bytes {0} [built]
   [56] ./~/sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
   [57] ./~/sockjs-client/lib/facade.js 723 bytes {0} [built]
   [58] ./~/sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
   [59] ./~/sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
   [60] ./~/sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
   [61] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
   [62] ./~/sockjs-client/lib/shims.js 18.2 kB {0} [built]
   [63] ./~/sockjs-client/lib/transport-list.js 613 bytes {0} [built]
   [64] ./~/sockjs-client/lib/transport/browser/websocket.js 172 bytes {0} [built]
   [65] ./~/sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
   [66] ./~/sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
   [67] ./~/sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
   [68] ./~/sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
   [69] ./~/sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
   [70] ./~/sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
   [71] ./~/sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
   [72] ./~/sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]
   [73] ./~/sockjs-client/lib/transport/websocket.js 2.71 kB {0} [built]
   [74] ./~/sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
   [75] ./~/sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
   [76] ./~/sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
   [77] ./~/sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]
   [78] ./~/sockjs-client/lib/utils/log.js 450 bytes {0} [built]
   [79] ./~/sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
   [80] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [81] ./~/url-parse/lolcation.js 1.58 kB {0} [built]
   [82] ./~/url/url.js 23.3 kB {0} [built]
   [83] ./~/url/util.js 314 bytes {0} [built]
   [84] ./~/vue-bulma-slider/src/Slider.vue 1.78 kB {0} [built]
   [85] ./src/App.vue 1.57 kB {0} [built]
   [86] ./~/vue-loader/lib/template-compiler.js?id=data-v-0fc9fcf7!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue 1.11 kB {0} [built]
   [87] ./~/vue-loader/lib/template-compiler.js?id=data-v-f81412c6!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-bulma-slider/src/Slider.vue 589 bytes {0} [built] [failed] [1 error]
   [88] ./~/vue-style-loader/addStyles.js 6.24 kB {0} [built]
   [89] ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-f81412c6!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bulma-slider/src/Slider.vue 1.31 kB {0} [built]
   [90] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
   [91] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
   [92] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [93] multi main 52 bytes {0} [built]

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-f81412c6!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-bulma-slider/src/Slider.vue
Module parse failed: ~/sandbox/slider/node_modules/vue-loader/lib/template-compiler.js?id=data-v-f81412c6!~/sandbox/slider/node_modules/vue-loader/lib/selector.js?type=template&index=0!~/sandbox/slider/node_modules/vue-bulma-slider/src/Slider.vue Unexpected token (11:21)
You may need an appropriate loader to handle this file type.
|     }],
|     staticClass: "slider",
|     class: ( _obj = {,
|       'is-fullwidth': _vm.isFullwidth
|     }, _obj[("is-" + _vm.type)] = _vm.type, _obj[("is-" + _vm.size)] = _vm.size, _obj ),
 @ ./~/vue-bulma-slider/src/Slider.vue 11:23-146
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi main

Attribute 'number' not allowed on element 'input'

line https://github.com/vue-bulma/slider/blob/master/src/Slider.vue#L2 creates HTML that is invalid, as per HTML5 spec:

Attribute number not allowed on element input at this point.

That particular attribute should either be data-number (although I don't see how that is useful if we already know that its type="range"), or removed altogether.

Deferred update

When moving the slider to a new position, it's value is updated with each step. Would it be possible to only update the value once the user releases the mouse for example?

This way only when the slider is moved to the desired position, the value is updated. (Kind of a deferred update / lazy update). I have tried to use the 'mouseup' event in stead of the 'change' event, but the DOM model doesn't get updated.