noUiSlider Format Issue

by Şükrü Gençtürk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.js"></script>
<div class="uislider-wrap">
    <div class="noUiSlider" id="price-range"></div>
</div>

<div class="min-max-price"> 
    <span class="min-price"></span>
    <span class="max-price"></span>
</div>

CSS

/*! noUiSlider - 7.0.10 - 2014-12-27 14:50:47 */
 .noUi-target, .noUi-target * {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -ms-touch-action:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.noUi-target {
    position:relative;
    direction:ltr
}
.noUi-base {
    width:100%;
    height:100%;
    position:relative
}
.noUi-origin {
    position:absolute;
    right:0;
    top:0;
    left:0;
    bottom:0
}
.noUi-handle {
    position:relative;
    z-index:1
}
.noUi-stacking .noUi-handle {
    z-index:10
}
.noUi-state-tap .noUi-origin {
    -webkit-transition:left .3s, top .3s;
    transition:left .3s, top .3s
}
.noUi-state-drag * {
    cursor:inherit!important
}
.noUi-base {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
.noUi-horizontal {
    height:18px
}
.noUi-horizontal .noUi-handle {
    width:34px;
    height:28px;
    left:-17px;
    top:-6px
}
.noUi-vertical {
    width:18px
}
.noUi-vertical .noUi-handle {
    width:28px;
    height:34px;
    left:-6px;
    top:-17px
}
.noUi-background {
    background:#FAFAFA;
    box-shadow:inset 0 1px 1px #f0f0f0
}
.noUi-connect {
    background:#3FB8AF;
    box-shadow:inset 0 0 3px rgba(51, 51, 51, .45);
    -webkit-transition:background 450ms;
    transition:background 450ms
}
.noUi-origin {
    border-radius:2px
}
.noUi-target {
    border-radius:4px;
    border:1px solid #D3D3D3;
    box-shadow:inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB
}
.noUi-target.noUi-connect {
    box-shadow:inset 0 0 3px rgba(51, 51, 51, .45), 0 3px 6px -5px #BBB
}
.noUi-dragable {
    cursor:w-resize
}
.noUi-vertical .noUi-dragable {
    cursor:n-resize
}
.noUi-handle {
    border:1px solid #D9D9D9;
    border-radius:3px;
    background:#FFF;
    cursor:default;
    box-shadow:inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB
}
.noUi-active {
    box-shadow:inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0...

JavaScript

$('#price-range').noUiSlider({
    start: [20, 100],
    step: 1,
    connect: true,
    range: {
        'min': [20],
            'max': [100]
    },
    format: wNumb({ prefix: '$', decimals: 0 })
});


$('#price-range').Link('upper').to($('.max-price'), 'html');
$('#price-range').Link('lower').to($('.min-price'), 'html');