Slider JQuery UI - Smooth movement

Question

Slider JQuery UI - Smooth movement

Navigation

#1 by (3 votes)
#2 by (3 votes)

6

I have included the following slider , but I can not find the options so that it does not move with the steps , that is, from one point to another abruptly since there are not many values, but I can move it from soft way.

JSFiddle: link

var initialValue = 4;
var sliderTooltip = function(event, ui) {
  var curValue = ui.value || initialValue;
  var tooltip = '<div class="tooltip-slider"><div class="tooltip-inner"><span>' + curValue + '</span><span class="last">años</span></div><div class="tooltip-arrow"></div></div>';

  $('.ui-slider-handle').html(tooltip);

}
$(document).ready(function() {
  $("#gs1").slider({
    range: "min",
    min: 3,
    max: 8,
    value: initialValue,
    create: sliderTooltip,
    slide: sliderTooltip,
    animate: true
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider {
  text-align: center;
  margin-top: 100px;
}

.slider .plazo {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Avenir-Heavy';
  color: #007BC6;
  font-size: 20px;
  margin-right: 10px;
}

.tooltip-slider {
  position: absolute;
  z-index: 1020;
  display: block;
  padding: 5px;
  font-size: 11px;
  visibility: visible;
  margin-top: -2px;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip-slider .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  background-color: #4a4a4a;
  transform: rotate(45deg) translate(0%, 30%);
  transform-origin: center;
  border-radius: 4px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #4A4A4A;
  position: relative;
  z-index: 2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.tooltip-inner span {
  display: block;
  font-family: 'Avenir-Medium';
  font-size: 20px;
}

.tooltip-inner span.last {
  font-size: 16px;
}

.slider-anyos {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.slider-anyos .anyos {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: 20px;
  font-family: 'Avenir-Medium';
}

.slider-anyos .anyos.last {
  left: inherit;
  right: 0;
}

.ui-slider {
  background-color: #D8D8D8;
  border-radius: 100px;
  height: 6px;
  margin: 0;
  width: 560px;
  padding: 0px;
  border: 0 !important;
}

.ui-slider-handle {
  background: #ED6B51;
  border-bottom: 1px solid #a8a79f;
  border-right: 1px solid #a8a79f;
  height: 20px;
  width: 10px;
  margin: 0;
  padding: 0px;
  display: inline-block;
}

.ui-slider-range {
  height: 10px;
  border-bottom: 3px solid red;
  position: relative;
}

.ui-slider-range-min {
  background-color: #007BC6;
}

.ui-slider-handle {
  background: #007BC6 !important;
  border: 5px solid #fff !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 8px 0px rgba(0, 0, 0, .2);
  height: 20px !important;
  width: 20px !important;
  padding: 0px !important;
  display: inline-block !important;
  top: -7px !important;
  outline: 0;
  cursor: pointer !important;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div class="slider">
  <div class="plazo">Plazo</div>
  <div class="slider-anyos">
    <div class="slider" id="gs1"></div>
    <div class="anyos first">3</div>
    <div class="anyos last">8</div>
  </div>
</div>

I've also tried the steps: 0 option but I can not get it.

Any ideas you can apply?

html css jquery-ui slider

asked by Cheshire 13.01.2017 в 12:35

source

2 answers

3

A quick idea: Put 10x times more values, in your case, from 30 to 80 and then in all uses you divide it by 10 and make it a floor.

Example :

var initialValue = 4;
var sliderTooltip = function(event, ui) {
  var curValue = ui.value || initialValue;
  var tooltip = '<div class="tooltip-slider"><div class="tooltip-inner"><span>' + Math.floor(curValue/10) + '</span><span class="last">años</span></div><div class="tooltip-arrow"></div></div>';

  $('.ui-slider-handle').html(tooltip);

}
$(document).ready(function() {
  $("#gs1").slider({
    range: "min",
    min: 30,
    max: 80,
    value: initialValue,
    create: sliderTooltip,
    slide: sliderTooltip,
    animate: true
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider {
  text-align: center;
  margin-top: 100px;
}

.slider .plazo {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Avenir-Heavy';
  color: #007BC6;
  font-size: 20px;
  margin-right: 10px;
}

.tooltip-slider {
  position: absolute;
  z-index: 1020;
  display: block;
  padding: 5px;
  font-size: 11px;
  visibility: visible;
  margin-top: -2px;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip-slider .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  background-color: #4a4a4a;
  transform: rotate(45deg) translate(0%, 30%);
  transform-origin: center;
  border-radius: 4px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #4A4A4A;
  position: relative;
  z-index: 2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.tooltip-inner span {
  display: block;
  font-family: 'Avenir-Medium';
  font-size: 20px;
}

.tooltip-inner span.last {
  font-size: 16px;
}

.slider-anyos {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.slider-anyos .anyos {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: 20px;
  font-family: 'Avenir-Medium';
}

.slider-anyos .anyos.last {
  left: inherit;
  right: 0;
}

.ui-slider {
  background-color: #D8D8D8;
  border-radius: 100px;
  height: 6px;
  margin: 0;
  width: 560px;
  padding: 0px;
  border: 0 !important;
}

.ui-slider-handle {
  background: #ED6B51;
  border-bottom: 1px solid #a8a79f;
  border-right: 1px solid #a8a79f;
  height: 20px;
  width: 10px;
  margin: 0;
  padding: 0px;
  display: inline-block;
}

.ui-slider-range {
  height: 10px;
  border-bottom: 3px solid red;
  position: relative;
}

.ui-slider-range-min {
  background-color: #007BC6;
}

.ui-slider-handle {
  background: #007BC6 !important;
  border: 5px solid #fff !important;
  border-radius: 100px;
  box-shadow: 0 4px 8px 0px rgba(0, 0, 0, .2);
  height: 20px !important;
  width: 20px !important;
  padding: 0px !important;
  display: inline-block !important;
  top: -7px !important;
  outline: 0;
  cursor: pointer !important;
}

<!-- jQuery + jquery-ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- HTML -->
<div class="slider">
  <div class="plazo">Plazo</div>
  <div class="slider-anyos">
    <div class="slider" id="gs1"></div>
    <div class="anyos first">3</div>
    <div class="anyos last">8</div>
  </div>
</div>

Or maybe it's more interesting to do a Math.round :

var initialValue = 4;
var sliderTooltip = function(event, ui) {
  var curValue = ui.value || initialValue;
  var tooltip = '<div class="tooltip-slider"><div class="tooltip-inner"><span>' + Math.round(curValue/10) + '</span><span class="last">años</span></div><div class="tooltip-arrow"></div></div>';

  $('.ui-slider-handle').html(tooltip);

}
$(document).ready(function() {
  $("#gs1").slider({
    range: "min",
    min: 30,
    max: 80,
    value: initialValue,
    create: sliderTooltip,
    slide: sliderTooltip,
    animate: true
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider {
  text-align: center;
  margin-top: 100px;
}

.slider .plazo {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Avenir-Heavy';
  color: #007BC6;
  font-size: 20px;
  margin-right: 10px;
}

.tooltip-slider {
  position: absolute;
  z-index: 1020;
  display: block;
  padding: 5px;
  font-size: 11px;
  visibility: visible;
  margin-top: -2px;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip-slider .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  background-color: #4a4a4a;
  transform: rotate(45deg) translate(0%, 30%);
  transform-origin: center;
  border-radius: 4px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #4A4A4A;
  position: relative;
  z-index: 2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.tooltip-inner span {
  display: block;
  font-family: 'Avenir-Medium';
  font-size: 20px;
}

.tooltip-inner span.last {
  font-size: 16px;
}

.slider-anyos {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.slider-anyos .anyos {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: 20px;
  font-family: 'Avenir-Medium';
}

.slider-anyos .anyos.last {
  left: inherit;
  right: 0;
}

.ui-slider {
  background-color: #D8D8D8;
  border-radius: 100px;
  height: 6px;
  margin: 0;
  width: 560px;
  padding: 0px;
  border: 0 !important;
}

.ui-slider-handle {
  background: #ED6B51;
  border-bottom: 1px solid #a8a79f;
  border-right: 1px solid #a8a79f;
  height: 20px;
  width: 10px;
  margin: 0;
  padding: 0px;
  display: inline-block;
}

.ui-slider-range {
  height: 10px;
  border-bottom: 3px solid red;
  position: relative;
}

.ui-slider-range-min {
  background-color: #007BC6;
}

.ui-slider-handle {
  background: #007BC6 !important;
  border: 5px solid #fff !important;
  border-radius: 100px;
  box-shadow: 0 4px 8px 0px rgba(0, 0, 0, .2);
  height: 20px !important;
  width: 20px !important;
  padding: 0px !important;
  display: inline-block !important;
  top: -7px !important;
  outline: 0;
  cursor: pointer !important;
}

<!-- jQuery + jquery-ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- HTML -->
<div class="slider">
  <div class="plazo">Plazo</div>
  <div class="slider-anyos">
    <div class="slider" id="gs1"></div>
    <div class="anyos first">3</div>
    <div class="anyos last">8</div>
  </div>
</div>

answered by 13.01.2017 в 12:48

Take coordinates of different div with drag and drop JavaScript C ++ Problem printing matrices

score 3 · Accepted Answer

One thing you could do is put the step to a small value like .1 or .01, that way the animation will be more fluid (the smaller the number the more steps there will be and the more fluid it will look).

Then the problem is that the value is no longer an integer number but will have decimals and that is not what you want to be displayed in the tooltip when the slider moves. What you would do then is that you would round the value (in my example I have rounded down using floor round , but you could round using round floor or ceil , the best that comes).

Initially I used floor , but then it was difficult to select the number 8. Using round it is easier to select the values of the extremes

Finally, you should create a stop event handler that will cause the slider to jump to the corresponding value when it is released (doing something similar to the rounding above and assigning the new value with "value").

Here you can see it working:

var initialValue = 4;
var sliderTooltip = function(event, ui) {
  var curValue = Math.round(ui.value || initialValue);
  var tooltip = '<div class="tooltip-slider"><div class="tooltip-inner"><span>' + curValue + '</span><span class="last">años</span></div><div class="tooltip-arrow"></div></div>';

  $('.ui-slider-handle').html(tooltip);

}

var stopTooltip = function(event, ui) {
  var curValue = Math.round(ui.value || initialValue);
  $("#gs1").slider("value", curValue);
}

$(document).ready(function() {
  $("#gs1").slider({
    range: "min",
    min: 3,
    max: 8,
    value: initialValue,
    create: sliderTooltip,
    slide: sliderTooltip,
    stop: stopTooltip,
    animate: true,
    step:0.01
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider {
  text-align: center;
  margin-top: 100px;
}

.slider .plazo {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Avenir-Heavy';
  color: #007BC6;
  font-size: 20px;
  margin-right: 10px;
}

.tooltip-slider {
  position: absolute;
  z-index: 1020;
  display: block;
  padding: 5px;
  font-size: 11px;
  visibility: visible;
  margin-top: -2px;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip-slider .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  background-color: #4a4a4a;
  transform: rotate(45deg) translate(0%, 30%);
  transform-origin: center;
  border-radius: 4px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #4A4A4A;
  position: relative;
  z-index: 2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.tooltip-inner span {
  display: block;
  font-family: 'Avenir-Medium';
  font-size: 20px;
}

.tooltip-inner span.last {
  font-size: 16px;
}

.slider-anyos {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.slider-anyos .anyos {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: 20px;
  font-family: 'Avenir-Medium';
}

.slider-anyos .anyos.last {
  left: inherit;
  right: 0;
}

.ui-slider {
  background-color: #D8D8D8;
  border-radius: 100px;
  height: 6px;
  margin: 0;
  width: 560px;
  padding: 0px;
  border: 0 !important;
}

.ui-slider-handle {
  background: #ED6B51;
  border-bottom: 1px solid #a8a79f;
  border-right: 1px solid #a8a79f;
  height: 20px;
  width: 10px;
  margin: 0;
  padding: 0px;
  display: inline-block;
}

.ui-slider-range {
  height: 10px;
  border-bottom: 3px solid red;
  position: relative;
}

.ui-slider-range-min {
  background-color: #007BC6;
}

.ui-slider-handle {
  background: #007BC6 !important;
  border: 5px solid #fff !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 8px 0px rgba(0, 0, 0, .2);
  height: 20px !important;
  width: 20px !important;
  padding: 0px !important;
  display: inline-block !important;
  top: -7px !important;
  outline: 0;
  cursor: pointer !important;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div class="slider">
  <div class="plazo">Plazo</div>
  <div class="slider-anyos">
    <div class="slider" id="gs1"></div>
    <div class="anyos first">3</div>
    <div class="anyos last">8</div>
  </div>
</div>