Using JS to determine range slider background widths

Question

I'm trying to control range slider track background widths using jQuery. I'm left scratching my head as to why the background doesn't seem to match the position of the slider however.

You can see the working page here: https://qh.brightchoicemarketing.com/hosting/cloud-vps-hosting/ (View on Chrome or any other Webkit browser)

Here is my code:

// .chrome styling
    $( 'input' ).on( 'input', function( ) {
        var x = document.getElementById("cpu").max;
        var x = document.getElementById("ram").max;
        var x = document.getElementById("ssd").max;
        console.log(x);
        y = this.value - 1;
        console.log(y);
        var percentWidth = ((y / x) * 100);
        console.log(percentWidth);
        $( this ).css( 'background', 'linear-gradient(to right, #da0266 0%, #00aeff '+percentWidth +'%, #eef1f8 ' + percentWidth + '%, #eef1f8 100%)' );
    } );

I am logging the values to console and the percentages appear to be correct. I next thought perhaps I had set a manually offset to move the slider thumb but I haven't and the background seems to go from too small to too large as you move the slider thumb from left to right (this makes me think it's a multiplier issue...).

Is my maths correct? I subtract 1 from the slider value to deal with the "0" position and then generate the percentage width that the slide thumb should be at.

EDIT: I am adding custom values to all of the sliders apart from the first one (this is to ensure they show what the user is actually selecting before pushing to the store):

// Output value for CPU range slider
var sliderCPU = document.getElementById("cpu");
var outputCPU = document.getElementById("valueCPU");
outputCPU.innerHTML = sliderCPU.value;

sliderCPU.oninput = function() {
  outputCPU.innerHTML = this.value;
}

// Set and output custom values for Memory range slider
var valuesRAM = [0,"256 MB","512 MB","1 GB","2 GB","3 GB","4 GB","5 GB","6 GB","7 GB","8 GB","9 GB","10 GB","11 GB","12 GB"];

var sliderRAM = document.getElementById('ram'),
   outputRAM = document.getElementById('valueRAM');
sliderRAM.oninput = function(){
    outputRAM.innerHTML = valuesRAM[this.value];
};
sliderRAM.oninput();

// Set and output custom values for SSD range slider
var valuesSSD = [0,"10 GB","20 GB","30 GB","40 GB","50 GB","60 GB","70 GB","80 GB","90 GB","100 GB","200 GB","300 GB","400 GB","500 GB"];

var sliderSSD = document.getElementById('ssd'),
   outputSSD = document.getElementById('valueSSD');
sliderSSD.oninput = function(){
    outputSSD.innerHTML = valuesSSD[this.value];
};
sliderSSD.oninput();

Answer 1

Add background-size: 105% 100% !important to this selector:

input[type="range"] {
        outline: none; 
        transition: background 450ms ease-in;
        -webkit-appearance: none;
        cursor: pointer;
        border-radius: 16px;
        height: 15px;
        -webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.3);
        background-size: 105% 100% !important
    }

Seems to work for me in Chrome and Firefox