Как изменять вид ползунка в слайдере?

101

04 января 2021, 16:20

Есть слайдер-ползунок, работающий с помощью jquery-ui. https://codepen.io/Raneto4ka/pen/WBMmer И есть задача - менять вид ползунка при изменении его положения. Например: вместо стандартного кружка будут смайлы (меняются от грустного к веселому), или этот кружок должен заполняться цветом в процессе перетаскивания, или менять свой размер (сначала мелкий, постепенно увеличивается приближаясь к 100%). Это вообще реально сделать? Подобных примеров нигде не нашла.

  <div class="w-slider input-field">
    <div class="slider"></div>
    <div><span class="value-slider">10%</span></div>
  </div>

Answer 1

slide: function( event, ui ) {
    $( "span.ui-slider-handle" ).css( {"width": ui.value, "height": ui.value} );
    $( ".value-slider" ).html( ui.value + '%');
}

Вобщем, таким способом можно и смайлы вместо кружка вставлять, и цвет менять и тд.

Answer 2

Сделал range слайдер на svg по мотивам вопроса..

В принципе возможно заменить форму кривой, просто заменив значение path d в svg-шке

let g = document.querySelector('svg g'); 
let path = document.querySelector('svg path'); 
let pathbg = document.querySelector('svg path + path'); 
let smile = document.querySelector('svg g path'); 
let span = document.querySelector('span'); 
let l = path.getTotalLength(); 
 
g.addEventListener('mousedown', hold) 
 
upd(27,32,0); 
 
function upd(x,y,len) { 
  let v = len/l; 
  g.setAttribute('transform', `translate(${x},${y})`) 
  smile.setAttribute('d', `M-7,${v*7} C-4,${(1-v)*7},4,${(1-v)*7},7,${v*7}`) 
  path.setAttribute('stroke-dasharray', `${len} 1000`) 
  pathbg.setAttribute('stroke-dasharray', `0 ${len} 1000`) 
  span.textContent = Math.round(v*100)/100; 
} 
 
function move(e){ 
  let pt = closestPoint(path, [e.x, e.y]); 
  upd(pt.x,pt.y, pt.length); 
} 
 
function hold(e) { 
  addEventListener('mousemove', move); 
  addEventListener('mouseup', release); 
} 
 
function release() { 
  removeEventListener('mousemove', move); 
  removeEventListener('mouseup', release); 
} 
 
function closestPoint(pathNode, point) { 
  var pathLength = pathNode.getTotalLength(), precision = 8, best, bestLength, bestDistance = Infinity; 
  for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) { 
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) { 
      best = scan, bestLength = scanLength, bestDistance = scanDistance; 
    } 
  } 
 
  precision /= 2; 
   
  while (precision > 0.5) { 
    var before, after, beforeLength, afterLength, beforeDistance, afterDistance; 
     
    if ((beforeLength = bestLength - precision) >= 0 &&  
       (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) { 
        
      best = before, bestLength = beforeLength, bestDistance = beforeDistance; 
       
    } else if ((afterLength = bestLength + precision) <= pathLength &&  
       (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) { 
        
      best = after, bestLength = afterLength, bestDistance = afterDistance; 
       
    } else { 
      precision /= 2; 
    } 
  } 
 
  best.distance = Math.sqrt(bestDistance); 
  best.length = bestLength; 
  return best; 
 
  function distance2(p) { 
    var dx = p.x - point[0], dy = p.y - point[1]; 
    return dx * dx;// + dy * dy; 
  } 
}

.track { 
  fill: none; 
  stroke-width: 4px; 
} 
 
.smile { 
  fill: none; 
  stroke-width: 2px; 
  stroke: red; 
} 
 
.knob { 
  cursor: pointer; 
  stroke-width: 2px; 
  fill: white; 
  stroke: red; 
}

<svg height="150" width="500"> 
  <path class="track" style="stroke:red" d="M27,32 C27,32,50,77,72,74 C94,71,124,24,152,17 C180,10,201,32,229,33 C257,34,284,15,311,25 C338,35,357,80,378,88 C399,96,426,72,426,72"></path> 
  <path class="track" style="stroke:lightgray" d="M27,32 C27,32,50,77,72,74 C94,71,124,24,152,17 C180,10,201,32,229,33 C257,34,284,15,311,25 C338,35,357,80,378,88 C399,96,426,72,426,72"></path> 
  <g> 
    <circle class="knob" r="11"></circle> 
    <circle class="knob" r="1" cx="3" cy="-3"></circle> 
    <circle class="knob" r="1" cx="-3" cy="-3"></circle> 
    <path class="smile"></path> 
  </g> 
</svg> 
<br><span></span>