HTML5スライダを垂直にレンダリングするときに問題が発生する

JQuery Mobileを使用してスライダをレンダリングしています。しかし、私はそれを縦に表示するのが難しいです。スペックは、スライダが高さ/幅に基づいて縦または横に表示するかどうかを判断すると思っていますが、私の場合は機能しません。私は間違って何をしていますか？HTML5スライダを垂直にレンダリングするときに問題が発生する

<!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>

出典

2011-02-10 AngryHacker

これは仕様だと思われますが、少なくともSafariでは、スライダは垂直には動作しません。一部のブラウザではまだ実装されていない場合があります。 – Dominic

@ddargadi http://flowplayer.org/tools/demos/rangeinput/vertical.htmlに実装されているように、Chromeで垂直スライダを動作させることができます。しかし、jQuery MobileスライダはiPhoneで実際に動作します。親指をドラッグしてもページ全体がドラッグされるわけではありません。 – AngryHacker

"wheel1Speed"！= "wheel1speed" – naugtur

私はJQMのドキュメントに目を通し（最新）と私もこれを見つけた垂直

を表示することができることスライダーについての情報を発見した： http://forum.jquery.com/topic/is-there-a-vertical-slider-for-jquery-mobile

出典

2011-02-15 13:23:49 naugtur

にリンクさせているかもしれないので、それを試してみてください。そうですね、私はそれを見ました。実際、最後のコメントは私のものです。 – AngryHacker

彼は垂直に表示するように修正するのは簡単だと言いました。あなたはおそらくいくつかのCSSを交換し、いくつかのxとyを交換する必要があります – naugtur

ここでスライダーを強制する方法を説明しますWebkitのブラウザ（クローム&サファリ）のための垂直モード：

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

出典

2011-06-29 14:11:00 gmoz22

私は、このアプローチに出くわしたWHI私は好きです：

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

出典

2015-06-10 13:57:31 tirdadc

HTML5スライダを垂直にレンダリングするときに問題が発生する

答えて

関連する問題