marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-09-09 10:37:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement custom Range component for opacity control (#9009)

Browse Source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Saikat Das
2025-01-30 03:16:40 +05:30
committed by GitHub
parent d29c3db7f6
commit bd1590fc74
6 changed files with 136 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/excalidraw/components/Range.scss Normal file
View File

@@ -0,0 +1,59 @@
@import "../css/variables.module.scss";
.excalidraw {
--Range-track-background: var(--button-bg);
--Range-track-background-active: var(--color-primary);
--Range-thumb-background: var(--color-on-surface);
--Range-legend-color: var(--text-primary-color);
.range-wrapper {
position: relative;
padding-top: 10px;
padding-bottom: 30px;
}
.range-input {
width: 100%;
height: 4px;
-webkit-appearance: none;
background: var(--Range-track-background);
border-radius: 2px;
outline: none;
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--Range-thumb-background);
border-radius: 50%;
cursor: pointer;
border: none;
}
.range-input::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--Range-thumb-background);
border-radius: 50%;
cursor: pointer;
border: none;
}
.value-bubble {
position: absolute;
bottom: 0;
transform: translateX(-50%);
font-size: 12px;
color: var(--Range-legend-color);
}
.zero-label {
position: absolute;
bottom: 0;
left: 4px;
font-size: 12px;
color: var(--Range-legend-color);
}
}