Rotating jquery UI slider does not work properly

Question

I am creating slider as below

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

i am applying css

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

after applying css the slider does not slide properly Its very hard to drag the handle The internal dragger does not get transformed how can i make it smooth

please anyone can help me out

JSFIDDLE link

Answer 1

Why to rotate it if you can change swap and have same effect? jQuery UI is conflicting with your transform css.

Instead of

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

use

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

    /* removed transform */
}

JSFiddle

Answer 2

Split out height/width into their own classes

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

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

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

Then for horizontal

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

and vertical

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

See jsfiddler for working example:

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

Answer 3

Here is the solution for you: Have a look on this 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

You could simply add transform once the slider is created using create event like so

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

Here is the JSFiddle .