Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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.</p> <p><a href="http://jsfiddle.net/NngVA/" rel="nofollow">Here's a significantly simplified example</a>, using rects instead of paths, making the fader span horizontally from coordinates 0 to 100 for easier assignment of values:</p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="-10 -5 110 20"&gt; &lt;defs&gt; &lt;style type="text/css"&gt; .fader {stroke:#989B9F} .faderBackground, .faderKnob {fill:url(#lightFaderGradient)} .faderForeground {fill:url(#darkFaderGradient)} &lt;/style&gt; &lt;linearGradient id="darkFaderGradient" gradientUnits="objectBoundingBox" x2="0" y2="1"&gt; &lt;stop offset="0" stop-color="#D7D9DC"/&gt; &lt;stop offset="1" stop-color="#42494C"/&gt; &lt;/linearGradient&gt; &lt;linearGradient id="lightFaderGradient" gradientUnits="objectBoundingBox" x2="0" y2="1"&gt; &lt;stop offset="0" stop-color="white"/&gt; &lt;stop offset="1" stop-color="#D7D9DC"/&gt; &lt;/linearGradient&gt; &lt;/defs&gt; &lt;g id="myFader" class="fader"&gt; &lt;rect class="faderBackground" width="100" height="10" rx="5"/&gt; &lt;rect class="faderForeground" width="50" height="10" rx="5"/&gt; &lt;circle class="faderKnob" cy="5" cx="50" r="7"/&gt; &lt;/g&gt; &lt;/svg&gt; </code></pre> <p>I added some example JS code using standard DOM manipulation, but of course you can use d3.js for more conventient code:</p> <pre><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) </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload