GithubHelp home page GithubHelp logo

shilon5 / angular-multi-slider Goto Github PK

View Code? Open in Web Editor NEW

This project forked from enkodellc/angular-multi-slider

0.0 2.0 0.0 74 KB

angular multiple slider directive

License: MIT License

JavaScript 59.90% HTML 31.36% CSS 8.73%

angular-multi-slider's Introduction

angular-multi-slider

AngularJS multi slider component with multiple sliders and thumbs support. Easily bind to 'value' and 'title' json objects. CSS style is very simple easily customize your slider handles and bubbles. No JQuery dependency required. The only dependency is Angular. I have added a key / legend and collision detection. The collision detection / bubble adjustment has a delay since the bubbles have an animation to them. Collision detection and bubble adjustment is not perfect but very good. If you have some ideas on improving this directive feel free to let me know.

*Derived from angular-rangeslider

Installing via Bower

bower install angular-multi-slider

Include both multislider.js and multislider.css, then add angularMultiSlider to your angular.module dependencies.

Examples

Preview

Angular Multiple Sliders

Usage

  1. Add the angularMultiSlider dependency to your Angular project. example:
    • angular.module('myApp', ['angularMultiSlider'])
  2. Create a 'multi-slider' directive in your view and give it a model, where ng-model is a variable on $scope.
    <multi-slider
      floor="0"
      step="10"
      precision="2"
      ceiling="500"
      bubbles="true"
      ng-model="sliders">
    </multi-slider>

Controller scope for sliders:

    $scope.sliders = [
      {title:'User 1: ', value:100, color: 'Red'},
      {title:'User 2: ', value:200, color: '#00FF00' },
      {title:'User 3: ', value:450, }
    ];

Multi-Slider Directive Properties

  • floor {number} Minimum Value for Slider
  • ceiling {number} Maximum Value for Slider
  • step {number} Value between steps in snapping on the scale. Examples (100, 10, 1, .1}
  • precision {number / integer} The precision to which round each step is rounded to. Default: 2
  • display-filter {$filter} Optional angular filter expression.
  • ng-model {object} Bound values for sliders, requires 'value' for slider and 'title' for bubble
  • bubbles {string} true or false for showing the persistent bubbles or false for just on hover

NgModel Properties

  • title {string} Optional Title for the bubbles that popup during grab or persistently set
  • value {number} Required - Value for the slider handle. This value should be between floor and ceiling inclusive
  • color {HEX, RGB, or HTML color} Optional color for the handle. Basically and valid CSS color: This can be a HEX color, RGB Color, or HTML color

CSS Style Properties Tips

  • handle .angular-multi-slider div.handle - Override the background-color in CSS for all the handles or use the NgModel color property
  • bar height .angular-multi-slider - Override the height to set the thickness of the slider line bar
  • bar color .angular-multi-slider div.bar - Override the border-radius and background to set the color of the slider line bar
  • bubble .angular-multi-slider div.bubble.active - Override the bubble background-color, color, font-size, etc. for the bubbles
  • bar color .angular-multi-slider div.bar - Override the border-radius and background to set the color of the slider line bar
  • limit .angular-multi-slider div.limit - Override the limits color and margin-top
  • limit floor .angular-multi-slider div.limit .floor - Override the limits color and margin-top for the floor only
  • limit ceiling .angular-multi-slider div.limit .ceiling - Override the limits color and margin-top for the ceiling only

Multi-Slide-Key Directive

This optional directive will create a key for the slider. Similar to multi-slider bind to the same 'ng-model' and use CSS to customize.

Todo

  • Set Dirty / Pristine
  • Color option within json object for each slider
  • Handle overlapping tooltips by checking handle proximity
  • A key directive
  • Bind / Watch to Ceiling & Floor for adjusting endpoints
  • Add filter to directive property for possible dates / angular filter
  • Added overlap prevention for sequential sliders no-overlap branch
  • Minify src -> dist folders
  • Tests

Submitting an issue

Please be responsible, the open source community is not there to guess your problem or to do your job. When submitting an issue try as much as possible to:

  1. Search in the already existing issues. if your issue has not been raised before.

  2. Give a precise description including angular version, angular-multi-slider version.

  3. Give a way to reproduce your issue, the best would be with a running example, you can use plunkr, or codepen. Tip: Here is a plunker you can fork

  4. Isolate your code sample on the probable issue to avoid pollution and noise.

  5. Close your issue when a solution has been found (and share it with the community)

Note that 80% of the open issues are actually not issues but "problem" due to developers laziness or lack of investigation. These "issues" are a waste of time for us and especially if we have to setup a sample to reproduce the issue which those developers could have done. Any open issue which does not fulfill this contract will be closed without investigation.

License

Code licensed under New BSD License.

angular-multi-slider's People

Contributors

enkodellc avatar

Watchers

 avatar  avatar

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.