¿Hay alguna manera si el usuario finaliza el Control deslizante de rango y hace clic en el botón "Enviar" y mostrará automáticamente el resultado en la página siguiente? ¿Y esa página de resultados tendrá un botón de reinicio o regreso a la primera página?

Por favor, vea el código que he adjuntado como referencia.

También el código de trabajo: http://jsfiddle.net/archer201977/h9f6r21u/

 function proRangeSlider(sliderid, outputid, colorclass) { var x = document.getElementById(sliderid).value; document.getElementById(outputid).innerHTML = x; document.getElementById(sliderid).setAttribute('class', colorclass); updateTotal(); } var total = 0; function updateTotal() { var list= document.getElementsByClassName("range"); [].forEach.call(list, function(el) { console.log(el.value); total += parseInt(el.value); }); document.getElementById("n_total").innerHTML = total; } $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; $(function() { $('form').submit(function() { $("#result").empty().append( "<ul>" + Object.entries($('form').serializeObject()).map(e => `<li>${e[0]}: ${e[1]}`).join("") + "</ul>" ); return false; }); });