Dev.to

Pure CSS Range Slider with custom variables

Tutorial for 'Pure CSS Range Slider with custom variables' Please follow me on Instagram and Youtube for the latest and more detailed CSS updates! Let's Begin! Create img element and 3 range sliders Image Element Sliders Each slider is enclosed in a with a class for styling and functionality. Slider 1: Alpha (Transparency) Slider 2: Color Adjustment Slider 3: Border Thickness Below is the html code We have assigned custom variables to every range slider: --img:a affects opacity --img:c affects filter like : grayscale() hue-rotate(), contrast() etc --img:b changes border-width CSS Let's create @property CSS for alpha(opacity) which defines custom properties (CSS variables) with specific types, inheritance behavior, and default values. Let's create for --_a(alpha), --_c(color), --_b(border). Also the following CSS code snippet defines a custom property (--alpha) that dynamically interpolates between a minimum (--alpha-min) and maximum (--alpha-max) value based on a control variable (--_a). So lets make it for --color and --border too. Also create @keyframes for variables --_a, --_c, --_b by assigning at (0%), setting it to 1. @property --_a { syntax: ""; inherits: true; initial-value: 0; } @property --_c { syntax: ""; inherits: true; initial-value: 0; } @property --_b { syntax: ""; inherits: true; initial-value: 0; } :root { /* alpha */ --alpha-min: 0; --alpha-max: 1; --alpha: calc(var(--alpha-max) * var(--_a) + var(--alpha-min) * (1 - var(--_a))); /* color */ --color-min: 1; --color-max: 0; --color: calc(var(--color-max) * var(--_c) + var(--color-min) * (1 - var(--_c))); /* border */ --border-min: 0; --border-max: 50; --border: calc(var(--border-max) * var(--_b) + var(--border-min) * (1 - var(--_b))); timeline-scope: --_a, --_c, --_b; animation: linear both; animation-timeline: --_a, --_c, --_b; animation-name: --_a, --_c, --_b; animation-range: entry 100% exit 0%; } @keyframes --_a { 0% { --_a: 1 }} @keyframes --_c { 0% { --_c: 1 }} @keyframes --_b { 0% { --_b: 1 }} Let's create page styling with below CSS body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: lab(30 9.9 -22.11); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; color: bisque; font-size: 20px; font-weight: 500; line-height: 1.6; } h2 { font-size: 50px} .slider { position: relative; width: 300px; margin-top: 50px; background: white; height: 10px; border-radius: 5px; } .slider1 span, .slider2 span, .slider3 span { position: absolute; left: -140px; top: -10px; width: 125px; text-align: right; color: bisque; } input[type="range"] { overflow: hidden; position: absolute; top: -7px; left: -2px; width: 300px; background: transparent; -webkit-appearance: none; } input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; -webkit-appearance: none; background: rgb(244, 114, 166); view-timeline: var(--img) inline; } input[type="range"]::-moz-slider-thumb { view-timeline: var(--img) inline; } .slider1 span:before { content:'alpha(' counter(a) '%)'; counter-reset: a calc(var(--alpha) / 0.01); } .slider2 span:before { content:'color(' counter(b) '%)'; counter-reset: b calc(100 * (1 - var(--color))); } .slider3 span:before { content:'border(' counter(c) '%)'; counter-reset: c var(--border); } Now let's assign the custom variables to image to control opacity, color and border. .image { width: 300px; border: 5px solid bisque; filter: opacity(var(--alpha)) grayscale(var(--color)); border-radius: calc(var(--border) * 1%); } Result Please follow me on Instagram and Youtube for the latest and more detailed CSS updates! watch Codepen Demo

Mar 15, 2025 - 09:34
 0
Pure CSS Range Slider with custom variables

Tutorial for 'Pure CSS Range Slider with custom variables'

CSS Range Slider

Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

Let's Begin! Create img element and 3 range sliders

  1. Image Element

  2. Sliders
    Each slider is enclosed in a

    with a class for styling and functionality.
  • Slider 1: Alpha (Transparency)
  • Slider 2: Color Adjustment
  • Slider 3: Border Thickness

Below is the html code

 class="image" src="img/1.jpg" alt="">

 class="slider slider1">
     type="range" name="alpha" value="100"
        style="--img:--_a">
class="slider slider2"> type="range" name="color" value="50" style="--img:--_c">
class="slider slider3"> type="range" name="border" value="100" style="--img:--_b">