将范围值写入拇指滑块

Question

I want to write the value of range input to the thumb. I looked to every single question about this I could find on Google and I didn't find a solution. I also want to when the value is 10001 I want it to show ∞ instead.

I have tried:

 $('#km').on('input', function() { if ($(this).val() === "10001") { console.log("infinity"); $(this).addClass("range-infinite") } else { $(this).removeClass("range-infinite"); } }); 

 .range { -webkit-appearance: none; -moz-apperance: none; background-image: linear-gradient(to right, #1299E6, #A0D9F9); width: 90%; margin-left: 70px; height: 1px; margin-bottom: 40px; border-top: none; } .range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; -moz-apperance: none; height: 30px; width: 80px; background: #1299E6; border: 1px solid #A0D9F9; border-radius: 40px; } .range::-webkit-slider-thumb::before { content: attr(data-val) } .range-infinite::before { content: "∞"; } .range input[type=range] { border: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="range-div"> <input type="range" name="" id="" class="range"> </div> 

but it doesn't seem to work.
Any help is appreciated.

Answer 1

:before and :after pseudo will not work on Form Action elements like input .
Instead use a span for example.

 $('.range').on('input', function() { var val = parseInt( this.value, 10 ); var v = val >= parseInt(this.max, 10) ? '∞' : val; $(this).next('span').attr("data-val", v); }).trigger('input'); 

 .unit::before { content: attr(data-val); } 

 <input type="range" name="" class="range" min=0 max=10001 step=1 value=0> <span class="unit">km</span> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

---

Update input range thumb value

If you want the .range-thumb SPAN element to follow-up with your value you could:

Position your SPAN thumb absolute into a relative parent.
Calculate and transform your value into thumb position px .
Given the thumb is always at width 100 here's an example:

 var $range = $('.range'); $range.each(function() { var $thumb = $(this).next('.range-thumb'); var max = parseInt(this.max, 10); var tw = 100; // Thumb width. See CSS $(this).on('input input.range', function() { var w = $(this).width(); var val = parseInt(this.value, 10); var txt = val >= max ? '∞' : val; var xPX = val * (w - tw) / max; // Position in PX // var xPC = xPX * 100 / w; // Position in % (if ever needed) $thumb.css({left: xPX}).attr("data-val", txt); }); }); $range.trigger('input.range'); // Calc on load $(window).on("resize", () => $range.trigger("input.range")); // and on resize 

 /* QuickReset */ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;} /* CUSTOM RANGE INPUT */ .range-div { position: relative; } .range { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(to right, #1299E6, #A0D9F9); width: 100%; height: 1px; outline: none; } .range:active::-webkit-slider-thumb { box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.4); } .range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 30px; width: 100px; background: #1299E6; border-radius: 30px; cursor: grab; } .range-thumb { position: absolute; left: 0px; /* half :thumb width */ top: 0; width: 100px; /* same as :thumb */ height: 30px; /* same as :thumb */ text-align: center; color: #fff; line-height: 30px; font-size: 12px; pointer-events: none; /* ignore mouse */ } .range-thumb::before { content: attr(data-val) " "; } 

 <div class="range-div"> <input type="range" name="" class="range" min=0 max=10001 step=1 value=0> <span class="range-thumb">km</span> </div> <script src="//code.jquery.com/jquery-3.1.0.js"></script>