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

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -