slider using rangeslider polyfill w handle width controlled by another slider

by hrabinowitz

HTML

<h1>Custom Range Slider</h1>

<div class="slidecontainer">
  <p>Default range slider:</p>
  <input type="range" min="1" max="100" value="50" id="basicRange">
</div>
<div>
	Value of 1st slider is <span id="outputFirst"></span>
</div>
<div>  
  <p>Custom range slider:</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div>
	Value of 2nd slider is <span id="output"></span>
</div>
<input type="button" id="changeHandle" value="Change Handle width">

CSS

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

#basicRange {
	width: 350px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: /*100%*/600px; /* Full-width */
    height: /*25px*/50px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: /*25px*/250px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: orange;/*#4CAF50; /* Green background */
		border: 1px solid blue;
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: /*25px*/250px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #ff0000; /* red */
    cursor: pointer; /* Cursor on hover */
}

/* for IE */
.slider::-ms-thumb {
	width: 250px;
	height: 25px;
	background: #00ff00;
	cursor: pointer;
}

JavaScript

/*! rangeslider.js - v2.3.0 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
(function(factory) {
    'use strict';

    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function($) {
    'use strict';

    // Polyfill Number.isNaN(value)
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
    Number.isNaN = Number.isNaN || function(value) {
        return typeof value === 'number' && value !== value;
    };

    /**
     * Range feature detection
     * @return {Boolean}
     */
    function supportsRange() {
        var input = document.createElement('input');
        input.setAttribute('type', 'range');
        return input.type !== 'text';
    }

    var pluginName = 'rangeslider',
        pluginIdentifier = 0,
        hasInputRangeSupport = supportsRange(),
        defaults = {
            polyfill: true,
            orientation: 'horizontal',
            rangeClass: 'rangeslider',
            disabledClass: 'rangeslider--disabled',
            activeClass: 'rangeslider--active',
            horizontalClass: 'rangeslider--horizontal',
            verticalClass: 'rangeslider--vertical',
            fillClass: 'rangeslider__fill',
            handleClass: 'rangeslider__handle',
            startEvent: ['mousedown', 'touchstart', 'pointerdown'],
            moveEvent: ['mousemove', 'touchmove', 'pointermove'],
            endEvent: ['mouseup', 'touchend', 'pointerup']
        },
        constants = {
            orientation: {
                horizontal: {
                    dimension: 'width',
                    direction: 'left',
                    directionStyle: 'left',
                   ...