I have included the following slider
, but I can't find the options so that it doesn't move with the steps
, that is, from one point to another abruptly as there aren't many values, but instead it can move smoothly.
JSFiddle: https://jsfiddle.net/43tpdr6L/
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 have also tried with the option steps: 0
but I can't.
Any ideas that I can apply?
A quick idea: Put 10 times more values, in your case, from 30 to 80 and then in all uses you divide it by 10 and make a floor.
Example :
Or maybe you are more interested in doing a Math.round :
Una cosa que podrías hacer es poner el
step
a un valor pequeño como .1 o .01, de ese modo la animación será más fluida (mientras menor sea el número más pasos habrá y más fluido se verá).Entonces el problema es que el valor ya no es un número entero sino que tendrá decimales y eso no es lo que quieres que se muestre en el tooltip cuando se mueve el slider. Lo que harías entonces es que redondearías el valor (en mi ejemplo he redondeado hacia abajo usando
floor
round
, pero podrías redondear usandoround
floor
oceil
, el que mejor que venga).Por último deberías crear un controlador del evento
stop
que hará que cuando se suelte el slider sí que salte al valor correspondiente (haciendo algo parecido al redondeo de arriba y asignando el nuevo valor con "value").Aquí lo puedes ver funcionando: