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

Zrób 2 div-y. 1 (na górze) ma ciemne tło, drugi jasne. A potem zmieniasz tylko width tego 1 (ciemny).

Chyba mnie nie zrozumiełeś jedynie co mi się usało zrobić to

http://mls.pl/test/pl/sprzedaz

Nie wiem jak zrobić aby zielony wykres się nie skalował tylko przycinał.

Pozdrawiam


Witam
Może inaczej się spytam.

Czy jest jakiś odpowiednik do szerokości suwaka aby zwrócił w px gdzie są suwaki coś takiego jak:

slide: function(event, ui) {
$("input[name='formSearchPriceMin']").val(ui.values[ 0 ]);
$("input[name='formSearchPriceMax']").val(ui.values[ 1 ]);
}

Pozdrawiam

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.

oki a jak wyciągnąć ile ma być przycięte z lewej a ile z prawej??

Przecież juz to masz tylko skaluje ci sie obrazek... zamiast obrazka daj samo tlo i zobaczysz jak to "pracuje".

na tak ale jak dam 3 div z białym tłem to mi zasloni też szary wykres, a szary ma być cały czas widoczny a zielony ma się przycinać tak jak jest to na tej amerykańskiej stronie.

Mi chodzi o cos takiego:
http://jsfiddle.net/4sr8jrpn/1/
tylko aby zamiast gradientu w div#nakladka był wyciety kształt wykresu.