2

Estou utilizando o Slider do jQuery UI, e estou querendo que o handle responsável por movimentar o slider, fique dentro dos limites do slider. Atualmente ele está assim:

Limite 0%:

inserir a descrição da imagem aqui

Limite 100%:

inserir a descrição da imagem aqui

Eu quero que ele fique dentro do limite do slider, dessa forma:

Limite 0%:

inserir a descrição da imagem aqui

Limite 100%:

inserir a descrição da imagem aqui

Como resolver esse problema? Segue o código no jsfiddle:

https://jsfiddle.net/a5erpzqp/2/

Observações importantes:

  • Mover o handle deve ser fluido tal como funciona normalmente;
  • O Slider utilizado usa a propriedade range conforme visto no jsfiddle
  • A solução não pode apresentar anomalias visuais
  • O jsfiddle apresenta uma amostra onde o handle ultrapassa os limites do Slider
1
  • A melhor solucao seria separar o "Total:N" em um label ao lado desse sliderhandle
    – HudsonPH
    Commented 11/09/2017 às 13:05

2 Respostas 2

1

Resolvi o problema com uma solução bem simples, criei um outra div que simula o background do Slider, e utilizando padding nas laterais foi suficiente para criar essa limitação visual. Para resolver o problema do range, adicionei uma div interna para criar o range inicial.

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
    range: 'min',
      create: function() {
        handle.text( 'total: '+ $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( 'total: ' + ui.value );
      }
    });
  } );
#custom-handle {
    width: 90px;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    margin-left:-45px;
  }
  
  body{padding:50px;}
  #slider{border:none;}
  .slider_bg{
    padding:0 44px;
    border:1px solid #CCC;
    position:relative;
  }
  .bg_ranger{
      background:#e9e9e9;
      width:45px;height:13px;
      position:absolute;
      top:0;
      left:0;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

<div class="slider_bg">
<div class="bg_ranger"></div>
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>
</div>

0

Defina a margem da esquerda do handle como -1px, depois faça uma verificação do valor atual do slide caso for maior que x valor ele altera a margem da esquerda para -101px caso for menor ele altera novamente para -1px.

Talvez alguém pergunte: como obteve o valor -101px?

Tamanho do handle = 100px
Tamanho da bordar do handle = 1px;

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
      create: function() {
        handle.text( 'total ' + $( this ).slider( "value" ) + '%' );
      },
      slide: function( event, ui ) {
        handle.text( 'total ' + ui.value + '%' );
        // Verifique o valor atual
        // Aqui eu define que ser for menor que
        // 50 ele altera a margin da esquerda para -1px
      	if (ui.value < 50) {
        	$("#custom-handle").css({
          	'margin-left': '-1px'
          });
        } else {
          // Caso for maior, define como -101px
          $("#custom-handle").css({
          	'margin-left': '-101px'
          });
        }
      }
    });
  } );
#custom-handle {
  width: 100px;
  height: 1.6em;
  top: 6px;
  margin-top: 0;
  text-align: center;
  line-height: 1.6em;
  font-size:11px;
  margin-left: -1px; /* Defina a margin da esquerda como 0px */
}
body{padding:20px 30px;}
#slider{
  height:20px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

Coloquei no Github para futura referência.

1
  • Olá Wéllinghton. Sua solução realmente impede que o handle ultrapasse o limite do Slider, entretanto ela não funciona de forma elegante. Ao mover o handle, ocorre o margin-left negativo que você propôs, e esse comportamento parece um erro para o usuário. A solução deve ser algo fluido, além disso, ao segurar o handle, o cursor deveria estar convenientemente posicionado no centro do handle. Obrigado pela colaboração.
    – Paulo
    Commented 11/09/2017 às 6:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .