0

Есть слайдер-ползунок, работающий с помощью 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>
3
  • обязательно jqueryui? 23 мая 2019 в 19:39
  • в целом нет, не обязательно.
    – Елена
    23 мая 2019 в 19:40
  • с svg это значительно проще чем с html, хотя возможно и то и то 23 мая 2019 в 19:42

2 ответа 2

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

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

1

Сделал 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.