CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
zur4ik
zur4ik

Reputation: 6254

jQueryUI slider issue on css scale

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>

Upvotes: 0

Views: 674

Answers (2)

Yash Yadav
Yash Yadav

Reputation: 655

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>

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 1

Related Questions