score:1

Accepted answer

I'd recommend using a rects instead of a paths for the slider. If you create SVG that you need to make dynamic, then it's usually a better idea to create it by hand rather than using a visual editor (especially if it's as simple as in this case). The visual editor not only creates a lot of code that's not needed, it also chooses coordinate values that are pretty much random.

Here's a significantly simplified example, using rects instead of paths, making the fader span horizontally from coordinates 0 to 100 for easier assignment of values:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="-10 -5 110 20">
  <defs>
    <style type="text/css">
      .fader           {stroke:#989B9F}
      .faderBackground,
      .faderKnob       {fill:url(#lightFaderGradient)}
      .faderForeground {fill:url(#darkFaderGradient)}
    </style>
    <linearGradient id="darkFaderGradient" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop offset="0" stop-color="#D7D9DC"/>
      <stop offset="1" stop-color="#42494C"/>
    </linearGradient>
    <linearGradient id="lightFaderGradient" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop offset="0" stop-color="white"/>
      <stop offset="1" stop-color="#D7D9DC"/>
    </linearGradient>
  </defs>
  <g id="myFader" class="fader">
    <rect class="faderBackground" width="100" height="10" rx="5"/>
    <rect class="faderForeground" width="50" height="10" rx="5"/>
    <circle class="faderKnob" cy="5" cx="50" r="7"/>
  </g>
</svg>

I added some example JS code using standard DOM manipulation, but of course you can use d3.js for more conventient code:

var faderX = parseFloat(prompt("Enter a value from 0 to 100"))

var fader = document.getElementById("myFader")
fader.getElementsByClassName("faderKnob")[0]
  .setAttribute("cx",faderX)
fader.getElementsByClassName("faderForeground")[0]
  .setAttribute("width",faderX)

score:-3

<html lang="en"><head>
    <meta charset="UTF-8">


    <style>



    </style>
</head>
<body>
    <svg
   width="100"
   height="100"
   id="slider"
   version="1.1"
   onload="init(evt)"
   onmouseup="released()"
       onmousemove="drag(evt)">
    <defs xmlns="http://www.w3.org/2000/svg">
        <!-- Symbol for Slider -->
        <symbol id="sliderSymbol" overflow="visible">
            <line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="9" pointer-events="none"/>
        </symbol>
    </defs>

 <script>
 <![CDATA[

      var isGripped=false

      var grabY   // mousedown coordinate
      var grabX
      var monitor // text reading 0-100
      var y       // the slider's dynamic coordinate

      var T_PI=2*Math.PI;

      function init(evt){

         var svgns = "http://www.w3.org/2000/svg";
         SVGDocument = evt.target.ownerDocument;

         monitor= SVGDocument.getElementById('monitor');
         handle=SVGDocument.getElementById('handle');

     // set dimensions according to the sliderFrame node below

         var sliderFrame= SVGDocument.getElementById('sliderFrame')

     //  y0 is the center of the slider, s is the range about the center

         s=0.5*parseFloat(sliderFrame.getAttribute('width'));
         y0=parseFloat(sliderFrame.getAttribute('y'))+s-0.5*parseFloat(handle.getAttribute('height'));
         y=y0

         handle.setAttribute("x",y0);
     }



      function grip(evt) {  

            isGripped=true;
            grabX=evt.clientX-y;
      }


      function drag(evt){

            if (!isGripped) return;
            X=(evt.clientX);

       // observe bounding box constraint

           y=Math.min(Math.max(X-grabX,y0-s),y0+s);       

           handle.setAttribute("x",y);
           monitor.textContent=Math.round(50*(1-(y-y0)/s));
      }


      function released(){
         isGripped=false;
      }


 ]]></script>





          <path id="sliderpathL" d="M 30 90 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" onclick="drag(evt)">
          </path>





               <line stroke-linecap="square" stroke-width="15" stroke="cyan" y2="90" x2="325" y1="90" x1="90"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_1" y2="102" x2="89.5" y1="96" x1="89.5"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_2" y2="102" x2="145.5" y1="96" x1="145.5"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_3" y2="105" x2="209.5" y1="96" x1="209.5"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_4" y2="101" x2="267.5" y1="96" x1="267.5"/>
                  <line fill="none" stroke-width="2" stroke="#000000" id="svg_4" y2="101" x2="317.5" y1="96" x1="317.5"/>

          <rect   id="sliderFrame" 
          x="85" 
          y="90" 
          width="245" 
          height="4" 
          stroke="dimgray" 
          stroke-width="0" 
        onmousemove="drag(evt)"  />

         <rect
           onmousedown="grip(evt)"
           height="20"
           width="10"
           x="85"
           y="80"
           id="handle"
           style="fill:#0000ff" />  
      <path id="sliderpathR" d="M 383 90 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red"></path>

        <g id="textbox">
       <rect x="390" y="70" width="100" height="40" rx=3 ry=3 style="stroke:#006600; fill: white"/>
       <text id='monitor' x="400" y="88">50</text>
        </g>




    </svg>



</body>
</html>

Related Query

More Query from same tag