CODEWITHSUNDEEP
javascriptjqueryhtmlsliderjquery-mobile
AngryHacker
AngryHacker

Reputation: 61606

Having trouble rendering the HTML5 Slider vertically

I am using JQuery Mobile to render a Slider and it works great. However, I am having trouble getting it to show up vertically. The specs say (at least my reading of them) that the slider figures out whether to show up vertically or horizontally based on the height/width, but it's not working in my case. What am I doing wrong?

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>jQuery Mobile Docs - Forms</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />  

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

        <style type="text/css">
            #wheel1Speed { height: 300px; width: 100px;}    
        </style>        

    </head> 
<body> 

<div data-role="page">  
    <div data-role="content"> 
        <input type="range" name="wheel1speed" id="wheel1speed" 
            value="0" min="-100" max="100" data-theme="b" data-track-theme="a"  /> 
    </div><!-- /content --> 
</div><!-- /page --> 

</body> 
</html>

Upvotes: 1

Views: 3307

Answers (3)

tirdadc
tirdadc

Reputation: 4703

I came across this approach which I like:

#wheel1speed {
  transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

Upvotes: 0

gmoz22
gmoz22

Reputation: 1346

Here's how to force the slider in vertical mode for Webkit browsers (Chrome & Safari):

#wheel1speed {
    -webkit-appearance: slider-vertical;
}

Upvotes: 3

naugtur
naugtur

Reputation: 16915

I have looked through JQM documentation (latest) and found no info about a slider being able to display vertically

I also found this: http://forum.jquery.com/topic/is-there-a-vertical-slider-for-jquery-mobile

Upvotes: 1

Related Questions