Git Product home page Git Product logo

slider's Introduction

vue-bulma

A modern UI framework based on Vue and Bulma.

Install

Install with npm:

$ npm i vue-bulma --save

Install with yarn:

$ yarn add vue-bulma

Example

import Vue from 'vue'
import * as components from 'vue-bulma'

// In the global registration
for (const [key, value] of Object.entries(components)) {
  const name = value.name || `vb-${key.toLowerCase()}`
  Vue.component(name, value)
}

Development

We use Lerna to manage multiple packages.

$ npm i lerna --global 

$ yarn bootstrap

Open Examples

$ yarn dev

Format packages

$ yarn run format

Create a package

# vue-bulma-container
$ lerna create vue-bulma-container
$ lerna add vue packages/vue-bulma-container/
$ lerna add bulma packages/vue-bulma-container/
$ cd packages/vue-bulma-container/
$ mkdir src
$ touch src/main.js
$ touch src/style.scss

Add to vue-bulma

$ lerna add vue-bulma-container packages/vue-bulma/

Team

Lead Maintainers

Collaborators

License

Licensed under MIT.

slider's People

Contributors

fundon avatar luventa avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

irhtml freewayz andrevandal nomos-system andersbiha mlc-code baikunz jwmxyz tdscross jellybobbin douglaslab rolandschuetz sachiotomita felipefernandesleandro linyue430 jfkz blueblazer172 teekay18

slider's Issues

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.

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 ?

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 + '%'

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?

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.