Limit range slider in Angular Js

Question

I am new to angular js. I would like to implement as following. Devide 100% into multiple options(dynamic).

Example: RGB colors, user can using our slider set Red-20% , Green-30% , Blue-50% (balance) Gender male-40% , Female-60% remaining balance.

If user set male to 45% automatically female set to remaining balance 55% with the same slider different color.

Finance share amount between people. http://www.bacubacu.com/colresizable/#samples in that multiple range slider Slider with Multiple Handle and Background Color for content

Can you suggest any one how to achieve using which slider module suit to me ?

Answer 1

Here in CodePen you can see an example of multi-range slider:

http://codepen.io/anandthakker/pen/marlo

Example of usage:

HTML

<slider model="probs" property="p" step=".05"></slider>

MODEL

$scope.probs = [ p: .1, p: .5,  p: .4]

and also a Plunker with a similar 'component':

http://plnkr.co/edit/fb9UD14AOoQqkgKxckrg?p=info