PDA

View Full Version : a slider like a ruler with graduation???



jocy
3 Feb 2010, 8:28 AM
morning,
please i want to create a graduate slider like the picture of the customslider of EXT-demo,
i know how to create a slider but i don't know how to graduate it like a ruler
i try the example of EXT-demo but the result is not what the picture show, the slider that i obtain looks like a simple slider.
so please if you i have some idea i am listen to you!
thanks !!!!

micgala
3 Feb 2010, 8:34 AM
There is no need to create multiple threads...

Take a look at this example, there you have the markers...
http://www.extjs.com/examples/explorer.html#customslider

I have never used a slider, but I GUESS it only shows those markers if you have only 10 divisions... but I am not sure...

Let's see if someone else have experience with this...

jocy
4 Feb 2010, 1:23 AM
sorry for doing two threads with the same contain's i thought that my first title wasn't clear....

thanks for your answer but it's what i were saing it is that kind of slider(customized slider) that i want but when i take his source code it gives me a simple slide no what we see i don't know why.

Througth my search i notes that the type of the slider depand of the image in the style sheet but even i don't know where i can find out that image ( a traiangle for the tip and a line whith division)

Arno.Nyhm
4 Feb 2010, 9:23 AM
with firebug i see the images comes from a resources css file which is included in the html of the example like this:


<link rel="stylesheet" type="text/css" href="samples/css/resources.css" />

jocy
4 Feb 2010, 11:53 PM
thanks
but see it too and unfortunately i notes that they haven't provide images for vertical slider and don't know how i can create my own because that it's the rigth way to do create my own!!!!

Arno.Nyhm
5 Feb 2010, 5:18 AM
i think you should go and rotate it and then make a similar css like this for the vertical slider:



#custom-slider{
width: 214px;
padding-top:6px;
background-repeat: no-repeat;
background-image:url(../images/bg/ticks.gif);
}

#custom-slider .x-slider-thumb {
background-image:url(../images/bg/slider-thumb.png);
}


how to do?

- use firebug and find out which images is needed for the horizonatal slider
- copy the images and (maybe) rotate it
- write a similar css like for the horizontal but for vertical


PS: i would not use the id ("#custom-slider") but a classname for the css - in this case (".custom-slider") then you can reuse this css for many sliders with an addStyleName("custom-slider") and not only for 1 item per page - (because an id must be unique per html page)

jocy
5 Feb 2010, 5:25 AM
i tried it but the rotation only works whith the ticks (graduation on the slider) but not whith the thumb
is why i wanted to create my own one!!!!

astorne
21 Feb 2010, 6:57 PM
this thread

http://www.extjs.com/forum/showthread.php?t=59968&highlight=slider+ruler

jocy
22 Feb 2010, 12:38 AM
thanks but as i was saying
i want to do a vertical slider with graduation not an horizontal one!!!