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

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

$("#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后，滑块无法正常滑动 很难拖动手柄 内部拖动器不会被转换 我怎样才能使它光滑

请任何人都可以帮我

---

如果可以更改交换并具有相同的效果，为什么要旋转它？jQuery UI与您的

transform

css冲突

而不是

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

使用

---

将高度/宽度划分为各自的类别

#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：

---

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

$（文档）.ready（函数（）{
$（“#slider1V”）.滑块({
方向：'垂直'，
动画：对，
分:0,，
最高：100
});
});

使用like so创建滑块后，只需添加

变换

---

下面是一个例子。

所有依赖于定位的jqueryui小部件似乎都非常不喜欢

transform

s，所以这不应该让人感到意外。你能做吗？你的小提琴上写着：

TypeError:$（…）.滑块不是一个函数

请检查我是否已更新能否用图像指定您希望从中获得的输出？是否有任何更新？我有许多滑块，有些是水平的，有些是垂直的，在方向更改时，我将水平方向更改为垂直方向，有些是垂直方向，有些是使用您的解决方案，但有些以相反的方式工作，所以…@pareshm那么为什么不使用不同的类呢？也许你的位置不同，或者初始位置是最大值？我已经尝试了所有的可能性，但它的工作方式是相反的我应该把什么代码我给的所有代码只有4个滑块3是水平的，1是垂直的vertical@pareshm将代码复制到JSFIDLE并显示“反向操作”您没有使用cssI位旋转滑块，而是应用了方向：“垂直”，然后应用变换：旋转（90度）；你为什么这样做@Pareshmi如果要将其转换为水平滑块，可以通过将方向：“垂直”更改为方向：“水平”来实现。当我对85度进行相同操作时，它无法正常工作。您可以为相同的角度发布JSFIIDLE吗

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

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

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