hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style sliders (fixes #41)

Browse Source
This commit is contained in:
daudix
2024-08-12 02:26:40 +03:00
parent 225d98e11e
commit d0407506f0
2 changed files with 51 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
content/demo/index.md
View File

@ -325,6 +325,23 @@ With `color` type:
<label for="color">Disabled:</label> <label for="color">Disabled:</label>
<input id="color" type="color" value="#b57edc" disabled /> <input id="color" type="color" value="#b57edc" disabled />
With `range` type:
<input type="range" min="1" max="100" value="33" id="range">
<!-- For the demo purposes only -->
<small id="range-value"></small>
<script type="text/javascript">
var slider = document.getElementById("range");
var output = document.getElementById("range-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<!-- End -->
### Figure Captions (`<figcaption>`) ### Figure Captions (`<figcaption>`)
```markdown ```markdown

34
sass/_input.scss
View File

@ -114,3 +114,37 @@ input[type="color"] {
border-radius: calc(var(--rounded-corner-small) / 2); border-radius: calc(var(--rounded-corner-small) / 2);
} }
} }
input[type="range"] {
-webkit-appearance: none;
appearance: none;
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 999px;
background: var(--primary-color);
width: 100%;
height: 0.5rem;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
box-shadow: var(--shadow);
border-radius: 999px;
background: white;
width: 1.5rem;
height: 1.5rem;
}
&::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
box-shadow: var(--shadow);
border: none;
border-radius: 999px;
background: white;
width: 1.5rem;
height: 1.5rem;
}
}