javascript - show currency in slider issue -

i'm using slider, works fine this:

{literal}     <script>         $( function() {             $( "#slider-revenue-max" ).slider({                 range: "max",                 min: 0,                 max: 10000,                 step: 100,                 value: {/literal}{if $revenue == ''}0{else}{$revenue}{/if}{literal},                 slide: function( event, ui ) {                     $( "#revenue" ).val ( ui.value);                 }             });             $( " #revenue" ).val("£" + $( "#slider-revenue-max" ).slider( "value" ) );         } );     </script> {/literal}` 

but when moving slider, "£" doesn't show, did this:

{literal}     <script>         $( function() {             $( "#slider-revenue-max" ).slider({                 range: "max",                 min: 0,                 max: 10000,                 step: 100,                 value: {/literal}{if $revenue == ''}0{else}{$revenue}{/if}{literal},                 slide: function( event, ui ) {                     $( "#revenue" ).val ( "£" + ui.value);                 }             });             $( " #revenue" ).val("£" + $( "#slider-revenue-max" ).slider( "value" ) );         } );     </script> {/literal} 

and shows "£" when use this, when apply filter, shows no results.

thanks

you can apply "£" using :before or :after via css or how did using leon's noui-slider refreshless.com below.

css:

.noui-handle:after {   content:attr(data-content);   display: block;   color: #fff;   font-size: 26px;   font-weight: 700;   font-family: 'open sans', sans-serif;   text-align: center;   line-height: 53px; } 

javascript:

$(".noui-handle").attr("data-content", "$" + display); 

display value grabbed whatever value user has on slider i.e. come $500 or something. hope helps.