Complicated ui range slider

Complicated ui range slider

Good day!

I am totally confused with solving one solution. I'll be very glad if you help me!

I need to create a sophisticated version of jQuery UI Slider. Part of the work I've done at the moment, here I upload the image screen what I have 

but I need to create more complex range price slider and this is a screen image from psd file what I need and trying to do , so if you can see I need to create a hidden price range or something else, maybe I am not right? (you can see the light green line - lately it will work by php and position will depend from availability of products in the price range)

  1. <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">

    <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>

    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
    </div>