CSS chart with D3 slider

Draggable bars with ability to add new bars with a restriction on the amount

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="chart"></div>

CSS

html,
body {
    background-color:white; 
    overflow:hidden;
    height:100%;
    color:#000;
    font-size:11px;
}

/* D3 Slider styling */

.d3-slider {
    position: relative;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    border: 1px solid #aaaaaa;
    z-index: 2;
}

.d3-slider-range {
    background:#2980b9;
    left:0px;
    right:0px;
    height: 0.8em;
    position: absolute;
}

.d3-slider-range-vertical {
    background:#2980b9;
    left:0px;
    right:0px;
    position: absolute;
    top:0;
}

.d3-slider-vertical {
    width: .8em;
    height: 100px;
}      

.d3-slider-handle {
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #d3d3d3;
    border-radius: 12px;
    background: #eee;
    background: linear-gradient(to bottom, #eee 0%, #ddd 100%);
    z-index: 3;
    cursor:pointer;
}

.d3-slider-handle:hover {
    border: 1px solid #999999;
}

.d3-slider-axis {
    position: relative;
    z-index: 1;    
}

.d3-slider-axis-bottom {
    top: .8em;
}

.d3-slider-axis-right {
    left: .8em;
}

.d3-slider-axis path {
    stroke-width: 0;
    fill: none;
}

.d3-slider-axis line {
    fill: none;
    stroke: #aaa;
    shape-rendering: crispEdges;
}

.d3-slider-axis text {
    font-size: 11px;
}

.d3-slider-vertical .d3-slider-handle {
    left: -.25em;
    margin-left: 0;
    margin-bottom: -.6em;      
}

/*slider styling end*/


/*Chart styling*/
#chart {
    margin-left:20px;
}

#profilesettings {
    height:150px;
    width:280px
}

#profilesettings .profileControls {
    right: 0;
    border: none;
    list-style: none;
}

#profilesettings ul.profileControls  {
    float:right;
    border:none;
}

#profilesettings .profileControls li {
    vertical-align:middle;
    margin-bottom:10px;
}

#profilesettings .profileControls .addProfile,
#profilesettings .profileControls .removeProfile{
    cursor:pointer;
}

#profileChart {
    width:100%;
    border: none !important;
    
}

#profileChart...

JavaScript

slider = function module() {
    "use strict";

    var min           = 0,
        max           = 100,
        step          = 0.01,
        animate       = true,
        axis          = false,
        margin        = 50,
        value,
        snap          = false,
        scale,
        axisScale,
        dispatch      = d3.dispatch("slide", "slideend", "click", "mouseup"),
        formatPercent = d3.format(".2%"),
        tickFormat    = d3.format(".0"),
        control       = {},
        handle1,
        sliderLabel,
        profileSliderLabel,
        profileSliderFill,
        sliderLength,
        data;

    control.min = function (_) {
        if (!arguments.length) return min;
        min = _;
        return control;
    };

    control.max = function (_) {
        if (!arguments.length) return max;
        max = _;
        return control;
    };

    control.step = function (_) {
        if (!arguments.length) return step;
        step = _;
        return control;
    };

    control.animate = function (_) {
        if (!arguments.length) return animate;
        animate = _;
        return control;
    };

    control.axis = function (_) {
        if (!arguments.length) return axis;
        axis = _;
        return control;
    };

    control.data = function (_) {
        if (!arguments.length) return data;
        data = _;

        return control;
    };

    control.value = function (_) {
        if (!arguments.length) return value;
        if (value) {
            moveHandle(stepValue(_));
        };
        value = _;
        return control;
    };

    control.snap = function (_) {
        if (!arguments.length) return snap;
        snap = _;
        return slidcontroler;
    };

    control.scale = function (_) {
        if (!arguments.length) return scale;
        scale = _;
        return control;
    };

    control.appendTo = function (target) {
   

            // Create scale if not defined by user
            if (!scale) {
            ...