D3 Slider

A D3 slider that attempts to use a Knockout binding

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: myVal">
<svg id="target"><svg>

CSS

.slider .background {
    cursor: pointer !important;
}

.slider {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.slider .domain {
    fill: none;
    stroke: #000;
    stroke-opacity: .3;
    stroke-width: 10px;
    stroke-linecap: round;
}

.slider .inner-bar {
    fill: none;
    stroke: #ddd;
    stroke-width: 8px;
    stroke-linecap: round;
}

.slider .fill-bar {
    stroke: #88CC55;
    stroke-width: 10px;
    stroke-linecap: round;
}

.slider .handle {
    fill: #fff;
    stroke: #000;
    stroke-opacity: .5;
    stroke-width: 1.25px;
    cursor: pointer;
}

JavaScript

window.mood = {};
window.mood.d3 = {};

/**
 * @fileoverview An SVG slider control using D3.js
 * @author MooD International (Ian Wright)
 * 
 * Originally based upon http://bl.ocks.org/mbostock/6452972
 */

/**
 * An SVG based slider control
 * @constructor
 */
mood.d3.slider = function () {

    var _update = function (v) { value = v; }; // General update function that updates the value
    
    var xScale;      // Scale for the x-axis
    var brush;       // Brush which is used to represent the slider
    var slider = {}; // The slider control that will be returned  
    
    // The following properties are public and modified through the getter/setter functions
    var margin = { top: 0, left: 0, bottom: 0, right: 0 };
    var cssClass = '';
    var width = 100;
    var minimumValue = 0;
    var maximumValue = 100;
    var value = 0;
    var handleRadius = 5;
    
    // The following functions are public and modified through the getter/setter functions
    var _callback = function (slider, v) {};
    var _databindCallback = function (slider, v) {};
    
    /**
     * Changes the width of the slider (pre initialization only)
     * @param {number} The width that the slider should take
     * @return {number} The width that the slider should take or the slider
     */
    slider.width = function (_) {
        if (!arguments.length) return width;
        width = _;
        return slider;
    };
    
    /**
     * Changes the radius of the slider handle (pre initialization only)
     * @param {number} The radius of the slider handle
     * @return {number} The radius of the slider handle or the slider
     */
    slider.handleRadius = function (_) {
        if (!arguments.length) return handleRadius;
        handleRadius = _;
        return slider;
    };
    
    /**
     * Changes the minimum value of the slider (pre initialization only)
     * @param {number} The minimum value that the slider can take
     * @return {number} The minimum value that the...