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

여기에 슬라이더를 강제하는 방법 웹킷 브라우저를위한 수직 모드 (크롬 & 사파리) :

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

출처

2011-06-29 14:11:00 gmoz22

나는이 접근 WHI 건너 왔어요 ch 내가 좋아하는 것 :

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

출처

2015-06-10 13:57:31 tirdadc

HTML5 슬라이더를 수직으로 렌더링하는 데 문제가 있음

답변

관련 문제