CSS: Slider (input type "range") before and after pseudo in IE EDGE -
i have slider text sizing in content controlled jquery.
on left side of slider, there should written "a-" label text of content gets smaller when slider goes down. , on right side, vice versa "a+"
here code works in chrome , safari doesn't work on ie edge. how can fix this.
thanks.
$('#slider').on('change',function(){ var val = $(this).val()+'px'; $('.content').css('font-size', val); });
#slider { max-width: 80px; display: block; position: relative; margin-left: calc(100% - 90px); margin-bottom: 1em; cursor: pointer; } #slider:before { content: 'a-'; position: absolute; left: -20px; } #slider:after { content: 'a+'; position: absolute; right: -20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" min="12" max="24" id="slider" /> <div class="content">my content goes here...</div>
Comments
Post a Comment