[jQuery ui slider-range] Graficzny wykres Opcje

[maniek74]

Witam


Chciałem za pomocą jQuery ui slider-range zrobić taki wykres do ceny:
http://www.realtor.com/realestateandhomes-.../Los-Angeles_CA
I KLIKAMY MORE FILTERS

wykres ceny

Samo tło zrobiłem:
#slider-range {
width: 279px; height: 128px; background: transparent url(../img/price_slider_background.png) no-repeat;
border: 0px;
}

ale nie wiem jak zrobić aby ciemniejszy obrazek się skalował tak jak na przykładzie, próbowałem:
.ui-widget-header {
width: 279px; height: 128px; background: transparent url({THEME_STYLE}/img/price_slider_background.png) no-repeat center bottom;
border: 0px;
}

lub

.ui-slider-horizontal {
width: 279px; height: 128px; background: transparent url(../img/price_slider_background.png) no-repeat center bottom;
border: 0px;
}

można prosić o naprowadzenie jak to zrobić?

Pozrawiam

[lukasz_os]

Robisz 3 divy:

główny - szare tło
następny z kolorem niebieskim takim jaki ma byc zasięg i on bedzie zmieniał sobie width i left
i trzeci który na biało zasłoni tobie część która ma byc ukryta (position absoulte top:0 left:0)

czyli nie musisz mieć grafiki tego "wykresu" tylko mieć wyciety z białego tła fragment który ujawni kolory.

Ten post edytował lukasz_os 28.08.2014, 15:21:32