javascript - Showing the selected value on the handler of range input as the value changes -

I have a range input that is a circle-shaped handler, I used CSS to look at Headler as a circle . Now that Im trying to find a way to show the value chosen within that circle, but I could not find a way to do that, even after a long time. That's why I'm here. Is there any way to do this? And one more thing I have to fill on the left and right edge of the handler, depending on the chosen price. Can you please suggest how do I do this?

  & lt; Input type = "range" min = "0" max = "10" /> Any help would be appreciated.  
 Input [type = category] {-webkit-appearance: none; } Input [type = category] :: - WebKit-Slider-runable-track {width: 300px; Height: 5px; Background: #ddd; Border: None; Boundary-radius: 3px; } Input [type = category] :: - webkit-slider-thumbs {-webkit-appearance: none; Border: 1px solid # e95e57; Height: 32px; Width: 32px; Limit-Radius: 50%; Background: white; Margin-top: -14px; } Input [type = category]: Focus {framework: none; } Input [type = category]: Focus :: - WebKit-Slider-runable-track {background: #ccc; }  

Here is an answer that has been mentioned by both sides. You can also do multiple range inputs on the page and all will work individually.

Note : I used some lines of code of Marke . Thanks for them.

1. HTML

     & lt; Div class = "range-wrapper" & gt; & Lt; Input type = "range" min = "0" max = "10" id = "myrange" /> & Lt; Div class = "text" & gt; 1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "range-wrapper" & gt; & Lt; Input type = "range" min = "0" max = "10" id = "mySecondRange" /> & Lt; Div class = "text" & gt; 1 & lt; / Div & gt; & Lt; / Div & gt;  
     
    
    jQuery  
     $ (document) .ready (function () {updateRangeValue ($ ('input [type = category ] '); $ (' Input [type = class] ').) (' Input change ', function () {var input = $ (this); updateRangeValue (input);});}); Function getRangeGradient (color 1, color 2, value, max) {var gradient = "linear-gradient (correct;" var breakpoint = (value / max) * 100; var attrValue = gradient + color1 + "0%," + Color1 + "+ + BreakPoint +"%, "+ color2 +" + + BreakPoint + "%," + 2 color + "100%)"; Return attrValue; } Function Update Range Value (Input) {var selected Colour = "# 428bca"; Var nonSelectedColor = "#ddd"; Var values ​​= input.val (); Var max = input.attr ('max'); Var inputWidth = input.width (); Var background = getRangeGradient (selected collar, non selected color, value, max); Var offLeft = Math.floor ((Value / Max) * Input-width - (((value / maximum) * InputWidth - InputWidth / 2) / 100) * 24); Var offLeftAbs = Value == Max? Input.offset () Left - 15 + offLeft: input.offset (). Left-10 + offLeft; Input.next ('. Text') CSS ({'left': offLeftAbs + 'px'}); Input.next ('.text') HTML (value). Input.css ('background', background); }  
    
    
    
    CSS 
    
     .range-wrapper {Overflow: hidden; Padding: 5px 0px; } .Range-Cover & gt; Div {status: relative; Top: -15px; Width: 5px; } .Range-Cover & gt; .text {indicators-events: none; } Input [type = category] {-webkit-appearance: none; Background: Linear-gradient (right, # 428bca 0%, # 428bca 50%, #ddd 50%, #ddd 100%); } Input [type = category] :: - WebKit-Slider-runable-track {width: 300px; Height: 5px; Border: None; Boundary-radius: 3px; } Input [type = category] :: - webkit-slider-thumbs {-webkit-appearance: none; Border: 1px solid # e95e57; Height: 32px; Width: 32px; Limit-Radius: 50%; Background: white; Margin-top: -14px; Cursor: indicator; } Input [type = category]: Focus {framework: none; Background: Linear-gradient (right, # 428bca 0%, # 428bca 50%, #ddd 50%, #ddd 100%);