8

I am trying to create my own HTML element that looks like this:

The look I want to create: I am trying to create this look My attempt: My attempt at replication

The widget is only for a iPad version of the website & I cannot unfortunately use JQuery.

My problem: I am trying to add a slider/arrow to the widget but I dont know how? Is there a webkit appearance that has an arrow slider on it? Is it possible to have a slider arrow on the widget?

My code:

<div style="background-color: rgb(191, 326, 383); width: 200px;">
    <ul style="list-style: none; -webkit-appearance: slider-vertical; width: 200px; height: 300px; margin: 0;">
        <li>jddsjh -</li>
        <li>jddsjh -</li>
        <li>jddsjh -</li>
        <li>jddsjh -</li>
    </ul>
</div>
sazr
  • 24,984
  • 66
  • 194
  • 362
  • 2
    Why can't you use jQuery? You're going to have to create an asset for the handle or render one with CSS but to my knowledge there isn't a webkit-appearance for it. To make it functional you will essentially have to re-write jQuery UI's draggable(). Not prohibitively difficult but not something I would be enthusiastic about. – Ansel Santosa Jan 02 '12 at 01:30
  • 1
    Are you looking for something like this: http://jsfiddle.net/XyJWa/ – henryaaron Jan 02 '12 at 02:11
  • @user1090389 Thats perfect, you should make an answer so I can accept. Have no idea how that even works but its what I need :P – sazr Jan 02 '12 at 02:17
  • @JakeM np, it an HTML5 input type, it's called range. You can look up some if it's attributes, I just took and it and rotated it 90 degrees... – henryaaron Jan 02 '12 at 02:32
  • @JakeM the `top` and `position` CSS is not required but it renders weird on jsFiddle – henryaaron Jan 02 '12 at 02:33

1 Answers1

18

input[type="range"] {
    position:absolute;
    -webkit-transform: rotate(90deg);
    top:100px;
   
}
<input type="range">
henryaaron
  • 6,042
  • 20
  • 61
  • 80