Question

我正在创建滑块，如下所示

$("#slider1V").slider({orientation : "vertical",min : 0,max : 100});

我正在申请css

#slider1V {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);
}

应用css后，滑块无法正常滑动它很难拖动手柄内部拖动器不会被转换我怎样才能让它顺利

请任何人都可以帮助我

JSFIDDLE link

Answer 1

如果你可以改变交换并具有相同的效果，为什么要旋转它？ jQuery UI与您的transform css冲突。

而不是

#slider1V {
    height: 132px;
    width: 10px;
}

使用

#slider1V {
    height: 10px;
    width: 132px;

    /* removed transform */
}

JSFiddle

Answer 2

将高度/宽度拆分为各自的类

#slider1V
{
      position: relative;
      left:20%;
      float: left;
      top: 30px;        
 }

.sliderVertical
{
      width: 132px;
      height: 10px;
}

.sliderHorizontal
{
      width: 132px;
      height: 10px;
}

然后是横向

$("#slider1V").slider({ orientation: "horizontal" });
$("#slider1V").addClass("sliderHorizontal");

和垂直

$("#slider1V").slider({ orientation: "vertical" });
$("#slider1V").addClass("sliderVertical");

有关工作示例，请参阅jsfiddler：

https://jsfiddle.net/msully725/ra42v1tf/5/

Answer 3

以下是您的解决方案：看看这个fiddle

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>    
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    $(document).ready(function(){

            $("#slider1V").slider({
            orientation : 'vertical',
                animate: true,
            min : 0,
            max : 100
    });

    });
    </script>
    <div id="slider1V"></div>

Answer 4

一旦使用create event创建滑块，就可以添加transform

$("#slider1V").slider({
    orientation : "vertical",
    min : 0,
    max : 100,
    create: function( event, ui ) { $(this).css('transform','rotate(38deg)') }
});

这是JSFiddle。

旋转jquery UI滑块无法正常工作

4 个答案: