Having issues with input type="range"

I'm trying to have a progression slider and have it display the current step it's on but it won't save the attr_ and it won't display the current value. I tried replacing the slider with a number input and I know that works. So I suspect the root cause is the fact that the "range" won't save. How do I fix this? < div id = "progSliders" > < div id = "progBox" style = " width: 80%;" > < h3 > Path </ h3 > < input type = "range" name = "attr_pathprog" min = "0" max = "5" value = "0" class = "pathprog" id = "pathprog" > < input type = "hidden" name = "attr_hidpathprog" value = "0" > Step: < input type = "number" name = "attr_pathCurrent" value = "@{hidpathprog}" disabled > / 5 </ div >   < script type = "text/worker" > on("change: pathprog ", function() { getAttrs([" pathprog "], function(values) { setAttrs({ hidpathprog: Math.min((values.pathprog))}); });   }); </ script > </ div >

Never mind, Just figured out that ranges aren't supported as inputs yet. Only displays. Thanks!

Aaron, My application was a bit different in that I wanted sliders to enable/disable certain abilities on my sheet, but you might be able to figure out a way to use this technique for multiple values.  Such as, I use an 'invisible' checkbox to maintain the value/state, whereas you might be able to use radios to do the same.  Here's a snippet of my code to make a binary slider: HTML <label class="attribute-active-switch"> <input name="attr_active" class="attribute-active-status" type="checkbox" value="1" /> <span class="attribute-active-slider theme-slider"></span> </label> CSS .ui-dialog .tab-content .charsheet .attribute-active-switch { position: relative; display: inline-block; width: 3.5rem; height: 1.9rem; top: .3rem; right: .5rem; } .ui-dialog .tab-content .charsheet .attribute-active-switch input.attribute-active-status { opacity: 0; width: 0; height: 0; } .ui-dialog .tab-content .charsheet .attribute-active-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s; border-radius: 3rem; } .ui-dialog .tab-content .charsheet .attribute-active-slider:before { position: absolute; content: ""; height: 1.3rem; width: 1.3rem; left: .3rem; bottom: .3rem; -webkit-transition: .4s; transition: .4s; border-radius: 50%; } .ui-dialog .tab-content .charsheet input.attribute-active-status:checked + .attribute-active-slider:before { -webkit-transform: translateX(1.6rem); -ms-transform: translateX(1.6rem); transform: translateX(1.6rem); } Additionally, a wiki article that explains how radio buttons can be used to achieve slider-like functionality here .