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)
- <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>