jQueryUI滑块问题在CSS规模上

Question

I have some issue with jQuery slider when I scale it with css transform: scale(x)

I understand that calculations of pixels on slider drag are not correct while it's scaled, but is there any solution?

Here is the example of my issue:

 $('.slider-1').slider(); $('.slider-2').slider(); 

 .wrapper-1, .wrapper-2 { padding: 25px; width: 500px; } .slider-2 { marggin-top: 50px; transform: scale(0.6); transform-origin: 0; } 

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="wrapper-1"> <p>Slider normal</p> <div class="slider-1"></div> </div> <div class="wrapper-2"> <p>Slider transformed (scaled)</p> <div class="slider-2"></div> </div> 

Answer 1

It won't work cause the position changes as a percentage. So its moving correctly but appears to be wrong cause its not at the position of mouse cursor.
For the right result you can set width height and top of slider , handle manually

 $('.slider-1').slider(); $('.slider-2').slider(); 

 .wrapper-1, .wrapper-2 { padding: 25px; width: 500px; } .slider-2 { margin-top: 50px; height: 5px !important; width: 100px; } .slider-2 span { transform: scale(0.6); top:-9px !important; } 

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="wrapper-1"> <p>Slider normal</p> <div class="slider-1"></div> </div> <div class="wrapper-2"> <p>Slider transformed (scaled)</p> <div class="slider-2"></div> </div> 

Answer 2

I don't think you can do that. I also tried using scale and it gave the same behavior. You could just change the width/height of the elements, it's easy to style.

 $('.slider-1').slider(); $('.slider-2').slider(); 

 .wrapper-1, .wrapper-2 { padding: 25px; width: 500px; } .slider-2.ui-slider-horizontal { marggin-top: 50px; transform-origin: 0; width: 60%; height: .5em; } .slider-2.ui-slider .ui-slider-handle { width: .8em; height: .8em; top: -0.2em; } 

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="wrapper-1"> <p>Slider normal</p> <div class="slider-1"></div> </div> <div class="wrapper-2"> <p>Slider transformed (scaled)</p> <div class="slider-2"></div> </div>