slider w handle width controlled by changing classes

Since we cannot reach down to style the thumb of an "html input range" dynamically in javascript, use this approach to dynamically change the class of the slider, thereby changing the thumb width

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, .sliderB {
    -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 */
}

.sliderB::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: /*25px*/60px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: yellow;
		border: 1px solid purple;
    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

function onSliderChange() {
	$('#output').text($('#myRange').val());
}

$('#myRange').on('change input', onSliderChange);
onSliderChange();

function onFirstSliderChange() {
	$('#outputFirst').text($('#basicRange').val());
}

$('#basicRange').on('change input', onFirstSliderChange);
onFirstSliderChange();

$('#changeHandle').click(function() {
	//debugger;
	//$('#myRange::-webkit-slider-thumb').css('width', '400px');
	if ($('.slider').length > 0)
	{
		$('.slider').addClass('sliderB').removeClass('slider');
	}
	else
	{
		$('.sliderB').addClass('slider').removeClass('sliderB');
	}
})