I have been experimenting with creating a slider using Jquery and storing the input in an
<input type="text" readonly>Upon inspecting the elements in Chrome, I noticed this extra div being created. Is there a way to prevent Jquery from creating this unnecessary div or at least remove the inherited CSS to make it invisible?
Here is the HTML code:
<span style='position:absolute; bottom:5px; left:15px;'>
<a href="#vote" id="vote-button" data-rel="popup"
class="ui-btn ui-btn-inline ui-corner-all"
data-position-to="window"
data-transition="fade">
Vote
</a>
</span>
<div data-role="popup" id="vote" style="width:300px; margin:auto; overflow:none;" class="ui-content">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
<br>
<button href="#main" class="ui-btn ui-btn-inline ui-corner-all" style="position:relative; width:100%; margin:0 auto">Send</button>
<p>
<label for="amount"></label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
</div>
The Javascript/jQuery snippet:
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
I referenced this example for the sliders:
Slider Example
And this example for the popup window: w3schools Popup Example
Codepen.io: Error case
Cheers