I’m working on an SVG gauge meter here I want to divide the semi-circle into parts when the range slider move on active stroke fill with gradient color. And want to add one more black color running track when the meter needle moves. I had tried using stroke-dasharray but after adding this all colors are coming at a time meter is not working properly.
- I want to divide the semi-circle into parts when the range slider move on active stroke fill with gradient color
- And I want to add one more black color running track when the meter needle moves.
My code here
JavaScript
x
38
38
1
/* set radius for all circles */2
var r = 400;3
var circles = document.querySelectorAll('.circle');4
var total_circles = circles.length;5
for (var i = 0; i < total_circles; i++) {6
circles[i].setAttribute('r', r);7
}8
/* set meter's wrapper dimension */9
var meter_dimension = (r * 2) + 100;10
var wrapper = document.querySelector('#wrapper');11
wrapper.style.width = meter_dimension + 'px';12
wrapper.style.height = meter_dimension + 'px';13
/* add strokes to circles */14
var cf = 2 * Math.PI * r;15
var semi_cf = cf / 2;16
var semi_cf_1by3 = semi_cf / 3;17
var semi_cf_2by3 = semi_cf_1by3 * 2;18
19
document.querySelector('#outline_curves').setAttribute('stroke-dasharray', semi_cf + ',' + cf);20
document.querySelector('#high').setAttribute('stroke-dasharray', semi_cf + ',' + cf);21
document.querySelector('#avg').setAttribute('stroke-dasharray', semi_cf_2by3 + ',' + cf);22
document.querySelector('#low').setAttribute('stroke-dasharray', semi_cf_1by3 + ',' + cf);23
document.querySelector('#outline_ends').setAttribute('stroke-dasharray', 2 + ',' + (semi_cf - 2));24
document.querySelector('#mask').setAttribute('stroke-dasharray', semi_cf + ',' + cf);25
/*bind range slider event*/26
var slider = document.querySelector('#slider');27
var lbl = document.querySelector("#lbl");28
var mask = document.querySelector('#mask');29
var meter_needle = document.querySelector('#meter_needle');30
31
function range_change_event() {32
var percent = slider.value33
var meter_value = semi_cf - ((percent * semi_cf) / 100);34
mask.setAttribute('stroke-dasharray', meter_value + ',' + cf);35
meter_needle.style.transform = 'rotate(' + (450 - ((percent * 180) / 100)) + 'deg)';36
lbl.textContent = percent + '%';37
}38
slider.addEventListener('input', range_change_event);JavaScript
1
66
66
1
#wrapper {2
position: relative;3
margin: auto;4
}5
6
#meter {7
width: 100%;8
height: 100%;9
transform: rotate(180deg);10
}11
12
.circle {13
fill: none;14
}15
16
.outline,17
#mask {18
stroke: #F1F1F1;19
stroke-width: 65;20
}21
22
.range {23
stroke-width: 60;24
}25
26
#slider,27
#lbl {28
position: absolute;29
}30
31
#slider {32
position: absolute;33
transform: rotate(180deg);34
cursor: pointer;35
left: 0;36
margin: auto;37
right: 0;38
top: 58%;39
width: 94%;40
}41
42
#lbl {43
background-color: #4B4C51;44
border-radius: 2px;45
color: white;46
font-family: 'courier new';47
font-size: 15pt;48
font-weight: bold;49
padding: 4px 4px 2px 4px;50
right: -48px;51
top: 57%;52
}53
54
#meter_needle {55
height: 40%;56
left: 0;57
margin: auto;58
position: absolute;59
right: 0;60
top: 10%;61
transform-origin: bottom center;62
/*orientation fix*/63
transform: rotate(450deg);64
width: 5px;65
background-color: red;66
}JavaScript
1
31
31
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
3
<body>4
<div id="wrapper">5
<svg id="meter">6
<circle id="outline_curves" class="circle outline" cx="50%" cy="50%">7
</circle>8
<circle id="high" class="circle range" cx="50%" cy="50%" stroke="#FDE47F">9
</circle>10
<circle id="avg" class="circle range" cx="50%" cy="50%" stroke="#7CCCE5">11
</circle>12
<circle id="low" class="circle range" cx="50%" cy="50%" stroke="#E04644">13
</circle>14
15
<circle id="mask" class="circle" cx="50%" cy="50%" >16
</circle>17
<circle id="outline_ends" class="circle outline" cx="50%" cy="50%">18
</circle>19
</svg>20
<svg version="1.1" id="meter_needle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.721px" height="93.834px" viewBox="0 0 16.721 93.834" enable-background="new 0 0 16.721 93.834" xml:space="preserve">21
<path fill="#464646" d="M13.886,84.243L2.83,83.875c0,0,3.648-70.77,3.956-74.981C7.104,4.562,7.832,0,8.528,022
c0.695,0,1.752,4.268,2.053,8.894C10.883,13.521,13.886,84.243,13.886,84.243z"/>23
<path fill="#464646" d="M16.721,85.475c0,4.615-3.743,8.359-8.36,8.359S0,90.09,0,85.475c0-4.62,3.743-8.363,8.36-8.36324
S16.721,80.855,16.721,85.475z"/>25
<circle fill="#EEEEEE" cx="8.426" cy="85.471" r="2.691"/>26
</svg>27
<input id="slider" type="range" min="25" max="100" step="25" value="0" />28
<label id="lbl" id="value" for="">0%</label>29
</div>30
<script src="script.js"></script>31
</body>Can anyone suggest to me how to achieve this output. Any help will be appreciate.
JavaScript
1
123
123
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>2
3
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65px" height="51.333px" viewBox="0 0 65 51.333" enable-background="new 0 0 65 51.333" xml:space="preserve">4
<g>5
<defs>6
<rect id="SVGID_1_" x="-157.417" y="-176.417" width="648" height="864"/>7
</defs>8
<clipPath id="SVGID_2_">9
<use xlink:href="#SVGID_1_" overflow="visible"/>10
</clipPath>11
<g clip-path="url(#SVGID_2_)">12
<defs>13
<rect id="SVGID_3_" x="-157.417" y="-176.417" width="648" height="864"/>14
</defs>15
<clipPath id="SVGID_4_">16
<use xlink:href="#SVGID_3_" overflow="visible"/>17
</clipPath>18
</g>19
<g clip-path="url(#SVGID_2_)">20
<defs>21
<rect id="SVGID_5_" x="-157.417" y="-176.417" width="648" height="864"/>22
</defs>23
<clipPath id="SVGID_6_">24
<use xlink:href="#SVGID_5_" overflow="visible"/>25
</clipPath>26
</g>27
<g clip-path="url(#SVGID_2_)">28
<defs>29
<rect id="SVGID_7_" x="-157.417" y="-176.417" width="648" height="864"/>30
</defs>31
<clipPath id="SVGID_8_">32
<use xlink:href="#SVGID_7_" overflow="visible"/>33
</clipPath>34
<path clip-path="url(#SVGID_8_)" fill="#FFFFFF" d="M19.527,44.274c-1.653,5.015-7.059,7.738-12.071,6.08535
c-5.015-1.654-7.739-7.058-6.087-12.071c1.652-5.015,7.058-7.739,12.072-6.084C18.456,33.855,21.179,39.26,19.527,44.274"/>36
<path clip-path="url(#SVGID_8_)" fill="#58595B" d="M19.514,44.289c-1.652,5.013-7.056,7.736-12.066,6.08337
c-5.014-1.653-7.736-7.056-6.084-12.067c1.652-5.013,7.055-7.736,12.068-6.083C18.443,33.875,21.166,39.277,19.514,44.289"/>38
<path clip-path="url(#SVGID_8_)" fill="#FFFFFF" d="M17.318,43.564c-1.253,3.801-5.35,5.865-9.15,4.61239
c-3.797-1.253-5.863-5.35-4.609-9.148c1.254-3.8,5.349-5.865,9.148-4.612C16.506,35.67,18.57,39.766,17.318,43.564"/>40
<path clip-path="url(#SVGID_8_)" fill="#58595B" d="M19.266,34.944c2.242,3.113,2.33,7.115,0.57,10.255l45.249-43.24L9.721,31.14841
C13.256,30.475,17.023,31.828,19.266,34.944"/>42
<defs>43
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="6.52" y="-11.184" width="62.369" height="60.661">44
<feFlood style="flood-color:white;flood-opacity:1" result="back"/>45
<feBlend in="SourceGraphic" in2="back" mode="normal"/>46
</filter>47
</defs>48
<mask maskUnits="userSpaceOnUse" x="6.52" y="-11.184" width="62.369" height="60.661" id="SVGID_9_">49
<g filter="url(#Adobe_OpacityMaskFilter)">50
<g enable-background="new ">51
<g enable-background="new ">52
<g>53
<defs>54
<path id="SVGID_10_" d="M17.516,29.352c2.243,0.335,3.028,2.134,3.028,2.134L57.891,6.807L17.516,29.352z"/>55
</defs>56
<clipPath id="SVGID_11_" clip-path="url(#SVGID_8_)">57
<use xlink:href="#SVGID_10_" overflow="visible"/>58
</clipPath>59
<defs>60
61
<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="6.52" y="-11.184" width="62.369" height="60.661">62
<feFlood style="flood-color:white;flood-opacity:1" result="back"/>63
<feBlend in="SourceGraphic" in2="back" mode="normal"/>64
</filter>65
</defs>66
<mask maskUnits="userSpaceOnUse" x="6.52" y="-11.184" width="62.369" height="60.661" id="SVGID_9_">67
<g filter="url(#Adobe_OpacityMaskFilter_1_)">68
<g enable-background="new ">69
</g>70
</g>71
</mask>72
73
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-236.1787" y1="699.8169" x2="-235.1792" y2="699.8169" gradientTransform="matrix(36.5072 -22.3825 22.3825 36.5072 -7021.3823 -30804.627)">74
<stop offset="0" style="stop-color:#FFFFFF"/>75
<stop offset="0.0466" style="stop-color:#D5D7D8"/>76
<stop offset="0.0983" style="stop-color:#B1B3B6"/>77
<stop offset="0.1557" style="stop-color:#929497"/>78
<stop offset="0.2174" style="stop-color:#797A7D"/>79
<stop offset="0.2847" style="stop-color:#626366"/>80
<stop offset="0.3595" style="stop-color:#4E4E50"/>81
<stop offset="0.445" style="stop-color:#3B3B3C"/>82
<stop offset="0.5476" style="stop-color:#202021"/>83
<stop offset="0.6848" style="stop-color:#080809"/>84
<stop offset="1" style="stop-color:#000000"/>85
</linearGradient>86
<polygon clip-path="url(#SVGID_11_)" mask="url(#SVGID_9_)" fill="url(#SVGID_12_)" points="28.547,49.477 68.889,24.744 87
46.861,-11.184 6.52,13.549 "/>88
</g>89
</g>90
</g>91
</g>92
</mask>93
<g opacity="0.8" clip-path="url(#SVGID_8_)">94
<g>95
<defs>96
<rect id="SVGID_13_" x="6.52" y="-11.184" width="62.369" height="60.661"/>97
</defs>98
<clipPath id="SVGID_14_">99
<use xlink:href="#SVGID_13_" overflow="visible"/>100
</clipPath>101
<g clip-path="url(#SVGID_14_)">102
<defs>103
<path id="SVGID_15_" d="M17.516,29.352c2.243,0.335,3.028,2.134,3.028,2.134L57.891,6.807L17.516,29.352z"/>104
</defs>105
<clipPath id="SVGID_16_">106
<use xlink:href="#SVGID_15_" overflow="visible"/>107
</clipPath>108
109
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="-236.1787" y1="699.8169" x2="-235.1792" y2="699.8169" gradientTransform="matrix(36.5072 -22.3825 22.3825 36.5072 -7021.3823 -30804.627)">110
<stop offset="0" style="stop-color:#FFFFFF"/>111
<stop offset="0.1467" style="stop-color:#FFFFFF"/>112
<stop offset="1" style="stop-color:#FFFFFF"/>113
</linearGradient>114
<polygon clip-path="url(#SVGID_16_)" fill="url(#SVGID_17_)" points="28.547,49.477 68.889,24.744 46.861,-11.184 6.52,13.549 115
"/>116
</g>117
</g>118
</g>119
<path clip-path="url(#SVGID_8_)" fill="#58595B" d="M12.709,42.044c-0.412,1.254-1.765,1.936-3.02,1.523120
c-1.253-0.414-1.934-1.765-1.52-3.019c0.412-1.253,1.764-1.936,3.017-1.521C12.44,39.441,13.121,40.792,12.709,42.044"/>121
</g>122
</g>123
</svg>
Advertisement
Answer
Here’s a working SVG example, with a little bit of javascript.
It’s not clear from your question what exactly you want the coloured divisions
to look like. For now I’ve just made them solid red. But you can make them look however you’d like by changing the fill of the <rect id="meter-colours" .../>.
JavaScript
1
49
49
1
let METER_DIVISIONS = 10;2
let METER_DIVISIONS_GAP = 4;3
4
// Initialise meter5
let meterDivisionsElem = document.getElementById("meter-divisions");6
// Calculate size of each meter division7
let totalLen = meterDivisionsElem.getAttribute("r") * Math.PI;8
let numGaps = METER_DIVISIONS - 1;9
let divLen = (totalLen - METER_DIVISIONS_GAP * numGaps) / METER_DIVISIONS;10
// Set meter divisions dash pattern11
let pat = divLen + ' ' + METER_DIVISIONS_GAP + ' ';12
meterDivisionsElem.setAttribute("stroke-dasharray", pat.repeat(numGaps) + ' ' + divLen + ' ' + totalLen);13
14
// The slider form element15
let sliderElem = document.getElementById("slider");16
// The slider label element17
let sliderLabelElem = document.getElementById("lbl");18
// The needle element19
let needleElem = document.getElementById("needle");20
// The black bar element21
let blackBarElem = document.getElementById("black-bar");22
let blackBarLen = blackBarElem.getAttribute("r") * Math.PI;23
// The meter colours element24
let meterColoursElem = document.getElementById("meter-colours");25
26
function setMeterTo(value)27
{28
// Update slider label29
sliderLabelElem.textContent = value + '%';30
31
// Update needle position32
let rotation = value * 180 / 100;33
needleElem.setAttribute("transform", "rotate(" + rotation + ")");34
35
// Update black bar length36
let barLen = value * blackBarLen / 100;37
blackBarElem.setAttribute("stroke-dasharray", barLen + ' ' + (2 * blackBarLen));38
39
// Update coloured division section of the meter40
meterColoursElem.setAttribute("transform", "rotate(" + rotation + ")");41
}42
43
// Add an input change handler to the slider44
sliderElem.addEventListener("input", function(evt) {45
setMeterTo(evt.target.value);46
});47
48
// Initialise meter to start value49
setMeterTo(25);JavaScript
1
11
11
1
#wrapper {2
width: 600px;3
}4
5
#slider {6
width: 100%;7
}8
9
#needle {10
stroke-linecap: round;11
}JavaScript
1
28
28
1
<div id="wrapper">2
<svg id="meter" viewBox="0 0 200 110">3
<defs>4
<circle id="meter-divisions" r="90" stroke-width="20" stroke-dasharray="282.7"/>5
6
<mask id="meter-divisions-mask">7
<use xlink:href="#meter-divisions" stroke="white"/>8
</mask>9
</defs>10
<g transform="translate(100,100) scale(1,-1)" fill="none">11
<!-- The grey meter divisions -->12
<use xlink:href="#meter-divisions" stroke="lightgrey"/>13
<!-- The inner semicircular black bar -->14
<circle id="black-bar" r="74" stroke="black" stroke-width="4" stroke-dasharray="232.5"/>15
<!-- the needle -->16
<line id="needle" x2="70" y2="0" stroke="black" stroke-width="2" stroke-dasharray="282.7"/>17
<!-- The coloured form of the ,meter divisions that gets rotated into view with the needle.18
It is initially off screen but gets revealed as it rotates. It is masked by using19
a shape matching the gray divisions -->20
<g mask="url(#meter-divisions-mask">21
<rect id="meter-colours" x="-100" y="-100" width="200" height="100" fill="red"/>22
</g>23
</g>24
</svg>25
26
<input id="slider" type="range" min="25" max="100" step="25" value="25" />27
<label id="lbl" id="value" for="">0%</label>28
</div>Update re new needle image
First let’s simplify your needle image:
JavaScript
1
7
1
<svg width="650px" viewBox="0 0 65 51.333">2
<g>3
<path fill="#58595B" fill-rule="evenodd" d="M19.514,44.289c-1.652,5.013-7.056,7.736-12.066,6.083c-5.014-1.653-7.736-7.056-6.084-12.067c1.652-5.013,7.055-7.736,12.068-6.083C18.443,33.875,21.166,39.277,19.514,44.289 M17.318,43.564c-1.253,3.801-5.35,5.865-9.15,4.612c-3.797-1.253-5.863-5.35-4.609-9.148c1.254-3.8,5.349-5.865,9.148-4.612C16.506,35.67,18.57,39.766,17.318,43.564 M12.709,42.044c-0.412,1.254-1.765,1.936-3.02,1.523c-1.253-0.414-1.934-1.765-1.52-3.019c0.412-1.253,1.764-1.936,3.017-1.521C12.44,39.441,13.121,40.792,12.709,42.044"/>4
<path fill="#58595B" d="M19.266,34.944c2.242,3.113,2.33,7.115,0.57,10.255l45.249-43.24L9.721,31.148C13.256,30.475,17.023,31.828,19.266,34.944"/>5
<path fill="#FFFFFF" fill-opacity="0.8" d="M17.516,29.352c2.243,0.335,3.028,2.134,3.028,2.134L57.891,6.807L17.516,29.352z"/>6
</g>7
</svg>To use this in your meter, we’ll need to locate an accurate centre of rotation (the dot in the circle), and re-orient it so that it has zero angle. We may also need to adjust its scale to fit the meter.
By analysis and experimentation, the centre of rotation is at (10.44, 41.3) and the rotation needed to zero out the rotation is 35.8 deg.
Since the meter is centred at (0,0) we need to start by shifting and rotating the new needle by those amounts.
JavaScript
1
7
1
<svg width="650px" viewBox="0 0 65 51.333">2
<g transform="rotate(35.8) translate(-10.44, -41.3)">3
<path fill="#58595B" fill-rule="evenodd" d="M19.514,44.289c-1.652,5.013-7.056,7.736-12.066,6.083c-5.014-1.653-7.736-7.056-6.084-12.067c1.652-5.013,7.055-7.736,12.068-6.083C18.443,33.875,21.166,39.277,19.514,44.289 M17.318,43.564c-1.253,3.801-5.35,5.865-9.15,4.612c-3.797-1.253-5.863-5.35-4.609-9.148c1.254-3.8,5.349-5.865,9.148-4.612C16.506,35.67,18.57,39.766,17.318,43.564 M12.709,42.044c-0.412,1.254-1.765,1.936-3.02,1.523c-1.253-0.414-1.934-1.765-1.52-3.019c0.412-1.253,1.764-1.936,3.017-1.521C12.44,39.441,13.121,40.792,12.709,42.044"/>4
<path fill="#58595B" d="M19.266,34.944c2.242,3.113,2.33,7.115,0.57,10.255l45.249-43.24L9.721,31.148C13.256,30.475,17.023,31.828,19.266,34.944"/>5
<path fill="#FFFFFF" fill-opacity="0.8" d="M17.516,29.352c2.243,0.335,3.028,2.134,3.028,2.134L57.891,6.807L17.516,29.352z"/>6
</g>7
</svg>The needle is now horizontal, and positioned at (0,0).
We can now integrate it into the previous solution:
JavaScript
1
49
49
1
let METER_DIVISIONS = 10;2
let METER_DIVISIONS_GAP = 4;3
4
// Initialise meter5
let meterDivisionsElem = document.getElementById("meter-divisions");6
// Calculate size of each meter division7
let totalLen = meterDivisionsElem.getAttribute("r") * Math.PI;8
let numGaps = METER_DIVISIONS - 1;9
let divLen = (totalLen - METER_DIVISIONS_GAP * numGaps) / METER_DIVISIONS;10
// Set meter divisions dash pattern11
let pat = divLen + ' ' + METER_DIVISIONS_GAP + ' ';12
meterDivisionsElem.setAttribute("stroke-dasharray", pat.repeat(numGaps) + ' ' + divLen + ' ' + totalLen);13
14
// The slider form element15
let sliderElem = document.getElementById("slider");16
// The slider label element17
let sliderLabelElem = document.getElementById("lbl");18
// The needle element19
let needleElem = document.getElementById("needle");20
// The black bar element21
let blackBarElem = document.getElementById("black-bar");22
let blackBarLen = blackBarElem.getAttribute("r") * Math.PI;23
// The meter colours element24
let meterColoursElem = document.getElementById("meter-colours");25
26
function setMeterTo(value)27
{28
// Update slider label29
sliderLabelElem.textContent = value + '%';30
31
// Update needle position32
let rotation = value * 180 / 100;33
needleElem.setAttribute("transform", "rotate(" + (-rotation) + ")");34
35
// Update black bar length36
let barLen = value * blackBarLen / 100;37
blackBarElem.setAttribute("stroke-dasharray", barLen + ' ' + (2 * blackBarLen));38
39
// Update coloured division section of the meter40
meterColoursElem.setAttribute("transform", "rotate(" + rotation + ")");41
}42
43
// Add an input change handler to the slider44
sliderElem.addEventListener("input", function(evt) {45
setMeterTo(evt.target.value);46
});47
48
// Initialise meter to start value49
setMeterTo(25);JavaScript
1
11
11
1
#wrapper {2
width: 600px;3
}4
5
#slider {6
width: 100%;7
}8
9
#needle {10
stroke-linecap: round;11
}JavaScript
1
39
39
1
<div id="wrapper">2
<svg id="meter" viewBox="0 0 200 110">3
<defs>4
<circle id="meter-divisions" r="90" stroke-width="20" stroke-dasharray="282.7"/>5
6
<mask id="meter-divisions-mask">7
<use xlink:href="#meter-divisions" stroke="white"/>8
</mask>9
</defs>10
<g transform="translate(100,100)">11
<g transform="scale(1,-1)" fill="none">12
<!-- The grey meter divisions -->13
<use xlink:href="#meter-divisions" stroke="lightgrey"/>14
<!-- The inner semicircular black bar -->15
<circle id="black-bar" r="74" stroke="black" stroke-width="4" stroke-dasharray="232.5"/>16
<!-- The coloured form of the ,meter divisions that gets rotated into view with the needle.17
It is initially off screen but gets revealed as it rotates. It is masked by using18
a shape matching the gray divisions -->19
<g mask="url(#meter-divisions-mask">20
<rect id="meter-colours" x="-100" y="-100" width="200" height="100" fill="red"/>21
</g>22
</g>23
24
<!-- the needle -->25
<g id="needle">26
<g transform="rotate(35.8) translate(-10.44, -41.3)">27
<path fill="#58595B" fill-rule="evenodd" d="M19.514,44.289c-1.652,5.013-7.056,7.736-12.066,6.083c-5.014-1.653-7.736-7.056-6.084-12.067c1.652-5.013,7.055-7.736,12.068-6.083C18.443,33.875,21.166,39.277,19.514,44.289 M17.318,43.564c-1.253,3.801-5.35,5.865-9.15,4.612c-3.797-1.253-5.863-5.35-4.609-9.148c1.254-3.8,5.349-5.865,9.148-4.612C16.506,35.67,18.57,39.766,17.318,43.564 M12.709,42.044c-0.412,1.254-1.765,1.936-3.02,1.523c-1.253-0.414-1.934-1.765-1.52-3.019c0.412-1.253,1.764-1.936,3.017-1.521C12.44,39.441,13.121,40.792,12.709,42.044"/>28
<path fill="#58595B" d="M19.266,34.944c2.242,3.113,2.33,7.115,0.57,10.255l45.249-43.24L9.721,31.148C13.256,30.475,17.023,31.828,19.266,34.944"/>29
<path fill="#FFFFFF" fill-opacity="0.8" d="M17.516,29.352c2.243,0.335,3.028,2.134,3.028,2.134L57.891,6.807L17.516,29.352z"/>30
</g>31
</g>32
33
</g>34
35
</svg>36
37
<input id="slider" type="range" min="25" max="100" step="25" value="25" />38
<label id="lbl" id="value" for="">0%</label>39
</div>