CODEWITHSUNDEEP
javascriptcssslider
Kenzo
Kenzo

Reputation: 1837

Problem with Ion.RangeSlider in vertical Orientation

I am trying to change the default orientation of ion range slider from horizontal to vertical, but the vertical slider moves in weird way when i try to change the scroll button.Please refer to the snippet.

$("#seeksliderControl").ionRangeSlider({
   grid: true,
   from: new Date().getMonth(),
   values: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  });
  
$("#speedSliderControl").ionRangeSlider({
  min: 100,
  max: 1000,
  from: 550
});
#playbackSlider {
    display: flex;
    flex-direction: column;
}

#sliders {
  display: flex;
  justify-content: space-between;
}

#seekSlider {
    display: flex;
    flex-direction: column;
    flex: 0 1 60%;
}
#playPauseDiv {
    align-self: center;
}

#speedSlider {
    flex: 0 1 20%;
    margin-top: 20px;
    transform: rotate(-90deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" rel="stylesheet"/>


<div id="playbackSlider">
 <div id="sliders">
     <div id="seekSlider">
        <input id="seeksliderControl" type="text" value="" />
        <div id="playPauseDiv">
          <img src="https://img.icons8.com/plasticine/60/000000/play.png">
        </div>
     </div>
     <div>
       
     </div>
     <div id="speedSlider">
        <input id="speedSliderControl" type="text" value="" />
     </div>
 </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>

I would appreciate any help.

Thanks

Upvotes: 1

Views: 1241

Answers (2)

solaire
solaire

Reputation: 505

For others searching for this, as it took me quite long to find it:

Its best to use this (was also recommended by the ionic team)

https://angular-slider.github.io/ngx-slider/

Upvotes: 1

mihutz
mihutz

Reputation: 305

It is displayed vertically, but it works only if you move your cursor horizontally(x-axis), so the slider is calculating only the horizontally move of the cursor. You should inverse x-axis with y-axis.

Upvotes: 1

Related Questions