Your path is not correct, use this format:
./icons/indicator-horizontal.svg
for more examples check this link:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Solution 1 :
Solution 2 :
I believe you are using background: svg-load(".iconsindicator-horizontal.svg"); property wrongly.
Simply try with background: url(".iconsindicator-horizontal.svg"); everywhere you using background property.
Make sure you use the correct url relative path w.r.t your CSS file.
Solution 3 :
convert your scss to css
input[type="range"]{
-webkit-appearance:none;width:100%;background:transparent
}
input[type="range"]:focus{
outline:none
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
height:21px;
width:11px;
background:svg-load(".iconsindicator-horizontal.svg");
-webkit-transform:translateY(-8px);
transform:translateY(-8px)}
input[type="range"]::-moz-range-thumb{
height:41px;
width:11px;
border:0;
border-radius:0;
background:svg-load(".iconsindicator-horizontal.svg");
transform:translateY(2px)}
input[type="range"]::-webkit-slider-runnable-track{
width:100%;
height:2px;
box-sizing:border-box;
background:black;
border-right:1px solid grey;
border-bottom:1px solid grey;
box-shadow:1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
}
input[type="range"]::-moz-range-track{
width:100%;
height:2px;
box-sizing:border-box;
background:black;
border-right:1px solid grey;
border-bottom:1px solid grey;
box-shadow:1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
} <div class="gene_controller width" data-original_value="0" data-name="width">
<p class="gene_name">width</p>
<div class="gene_slider">
<div class="gene_input_row"><img class="undo invisible" src="/image/reset.png" style="padding:1px;"><input class="number_input slider-input" type="number" value="0" step="0.1"><img class="x" src="icons/scroll.svg"></div>
<div class="slider"><input type="range" min="-2" max="2" step="any" value="0"></div>
</div>
<!--document.getElementsByClassName("slider")[0].children[0].min
esto es un comentario en html
-->
</div>Problem :
I want to modify the slider but I get this error:
Unknown property name
What am I doing wrong?
I am using chrome and my os is windows 7.
<head>
<body>
<div class="gene_controller width" data-original_value="0" data-name="width">
<p class="gene_name">width</p>
<div class="gene_slider">
<div class="gene_input_row"><img class="undo invisible" src="/image/reset.png" style="padding:1px;"><input class="number_input slider-input" type="number" value="0" step="0.1"><img class="x" src="icons/scroll.svg"></div>
<div class="slider"><input type="range" min="-2" max="2" step="any" value="0"></div>
</div>
<!--document.getElementsByClassName("slider")[0].children[0].min
esto es un comentario en html
-->
<style>
input[type="range"] {
-webkit-appearance: none;
width: 100%;
background: transparent;
&:focus {
outline: none;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 21px;
width: 11px;
background: svg-load(".iconsindicator-horizontal.svg");
transform: translateY(-8px);
}
&::-moz-range-thumb {
height: 41px;
width: 11px;
border: 0;
border-radius: 0;
background: svg-load(".iconsindicator-horizontal.svg");
transform: translateY(2px);
}
&::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,
0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
&::-moz-range-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,
0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
}
</style>
</div>