SVG JQuery slider to nearest number

In this example below you will see how to do a SVG JQuery slider to nearest number with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ro6er, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ro6er ©
  • HTML
  • CSS
  • JavaScript
    <h1>SVG slider clickable</h1>

<div class="slider">
  <svg width="302" height="49" viewBox="0 0 302 49" xmlns="http://www.w3.org/2000/svg">
   <title>Group</title>
   <g fill="none" fill-rule="evenodd">
      <path d="M0 0h302v49H0V0z" fill-opacity=".659" fill="#5A1999"/>
      <path d="M13 13h275v7H13v-7z" fill="#231A5D"/>
      <path d="M14 14h273v5H14v-5z" fill="#CBA9FF"/>

      <path class="green-bar" d="M14 14h128v5H14v-5z" fill="#997519"/>
      
      <circle fill="#E3D73C" cx="39" cy="15.5" r="7.5"/>

      <path d="M15 23h2v7h-2v-7zm26 0h2v7h-2v-7zm27 0h2v7h-2v-7zm27 0h2v7h-2v-7zm26 0h2v7h-2v-7zm25 0h2v7h-2v-7zm27 0h2v7h-2v-7zm27 0h2v7h-2v-7zm27 0h2v7h-2v-7zm27 0h2v7h-2v-7zm31 0h2v7h-2v-7z" fill="#FFF"/>

      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="13" y="40" fill="#000">0</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="39" y="40" fill="#000">1</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="66" y="40" fill="#000">2</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="93" y="40" fill="#000">3</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="119" y="40" fill="#000">4</tspan>
      </text>
      <text fill="#F6D81E" font-family="Verdana" font-size="9.051">
         <tspan x="144" y="40" fill="#000">5</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="171" y="40" fill="#000">6</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="198" y="40" fill="#000">7</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="225" y="40" fill="#000">8</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="252" y="40" fill="#000">9</tspan>
      </text>
      <text fill="#DDD" font-family="Verdana" font-size="9.051">
         <tspan x="280" y="40" fill="#000">10</tspan>
      </text>
   </g>
</svg>
</div>

/*Downloaded from https://www.codeseek.co/ro6er/svg-jquery-slider-to-nearest-number-ezBbKG */
            svg {
          cursor: pointer;
        }
        circle {
          transform: translateX(30px);
        }
        circle:hover {
          fill: #e4e4e4;
        }
        text,
        tspan {
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        text:after {
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            background: orange;
            z-index: 10;
        }
        text:hover {
          fill: #fff;
        }
        .bounce {
          animation: bounce 200ms ease-out;
        }

        @-webkit-keyframes bounce {
            from, to  {
              transform: translate3d(197%, 0, 0);
              animation-timing-function: ease-out;
            }
            50% {
              transform: translate3d(230%, 0, 0);
              animation-timing-function: ease-in;
            }
        }


/*Downloaded from https://www.codeseek.co/ro6er/svg-jquery-slider-to-nearest-number-ezBbKG */
            $(function() {

          function slider(e) {
            if(e.which==1) {
              var offset = $(this).offset();
              var curPos = (e.pageX - offset.left - 30);
              var obj = $("text");
              var arr = [];
              var elements = document.getElementsByTagName("text");
              for (x = 0; x < elements.length; x++) {

                var nearestNum = elements[x].children[0].attributes.x.value;

                // loop to array
                JSON.stringify(nearestNum);
                arr.push(nearestNum);

                function findClosest(array,elem) {
                  var minDelta = null;
                  var minIndex = null;
                  for (var i = 0 ; i<array.length; i++){
                    var delta = Math.abs(array[i]-elem);
                    if (minDelta == null || delta < minDelta){
                      minDelta = delta;
                      minIndex = i;
                    }
                    // if it is a tie return an array of both values
                    else if (delta == minDelta) {
                      return [array[minIndex],array[i]];
                    }
                    // if it has already found the closest value
                    else {
                      return array[i-1];
                    }
                  }
                  return array[minIndex];
                }
                var closest = findClosest(arr,curPos);
              }

              if ( e.pageX  < 50 ) {
                curPosBar = 0;
              } else {
                var curPosBar = Number(closest) + 12;
              }

              $(".green-bar").attr("d","M14 14h"+ curPosBar +"v5H14z");

              reset all text back to white. 
              $(" tspan ").closest("text").attr("fill","#DDD");

              if (curPos < 12) {
                // if minus amount. 
                $("circle").attr("cx", "-13");
                $(" tspan[x=13] ").closest("text").attr("fill", "#F6D81E");  
              } else {
                $("circle").attr("cx", +closest);
                $(" tspan[x=" + closest + "] ").closest("text").next().attr("fill", "#F6D81E");
              }

              $('circle').attr("class","bounce");

              setTimeout(function(){
                // remove class after CSS animation complete.
                $('circle').attr("class","");
              }, 500);
            }

          }

          $("svg").on("mousemove", slider);

          $("svg").on("mousedown", slider);


        });

Comments