Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Question

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far.

var sliderValue = $('#range');

sliderValue.oninput = function(){
    var val1 = this.value;
    var val2 = 100-val1;     
    $('<style> #filter:before{linear-gradient(to top, rgba(255,255,255,1) '+val1+'%,rgba(0,0,0,0) '+val2+'%);}</style>').appendTo("#filter");
};

.slider
{
    -webkit-appearance:none;
    appearance:none;
    width: 100%;
    height: 10px;
    max-width: 400px;
    background-color: #ccc;
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
}
#filter {
    position:relative;
    float: left;
    max-height: 480px; 
    
}

#filter:before {
    content: "";
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    width:320px;
    height:100%;
    background: linear-gradient(to top, rgba(255,255,255,1) 15%,rgba(0,0,0,0) 22%);
    z-index: 1;
}

<div class="container">
   <input type="range" min="0" max="100" value="0" class="slider" id="range">    
   <div id="filter">  
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
   </div>
</div>  
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

javascript html jquery css

Answer 1

Answer №1

If you want the gradient to work properly, there are some adjustments that need to be made in the code:

Ensure you are selecting the input element using jQuery's $(...) function instead of document.getElementById(...).
Link the input element's oninput function to jQuery's input event.
Normalize the slider value from 0 to 1 rather than 0 to 100.
Make sure the gradient CSS declaration uses the correct notation for the color values (e.g., rgba(255,255,255,1) should be rgba(255,255,255,1.0)).

After making these changes, your code should look something like this:

HTML:

<div class="container">
  <input type="range" min="0" max="100" value="0" class="slider" id="range">    
  <div id="filter">
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
  </div>
</div>

jQuery:

var sliderValue = $('#range');
sliderValue.on('input', function() {
  var val1 = this.value / 100;
  var val2 = 1 - val1;
  $('<style> #filter:before {background: linear-gradient(to top, rgba(255,255,255,1.0) ' + val1*100 + '%, rgba(0,0,0,0) ' + val2*100 + '%);}</style>').appendTo("#filter");
});

CSS:

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  max-width: 400px;
  background-color: #ccc;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

#filter {
  position: relative;
  float: left;
  max-height: 480px; 
}

#filter:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,1.0) 15%, rgba(0,0,0,0) 22%);
  z-index: 1;
}

Remember that the tag is meant for declaring CSS styles in the HTML page header and not for dynamically creating styles in jQuery. In the provided code snippet, we used the appendTo method to insert the dynamically generated CSS style into the #filter element.

Answer 2

If you want the gradient to work properly, there are some adjustments that need to be made in the code:

Ensure you are selecting the input element using jQuery's $(...) function instead of document.getElementById(...).
Link the input element's oninput function to jQuery's input event.
Normalize the slider value from 0 to 1 rather than 0 to 100.
Make sure the gradient CSS declaration uses the correct notation for the color values (e.g., rgba(255,255,255,1) should be rgba(255,255,255,1.0)).

After making these changes, your code should look something like this:

HTML:

<div class="container">
  <input type="range" min="0" max="100" value="0" class="slider" id="range">    
  <div id="filter">
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
  </div>
</div>

jQuery:

var sliderValue = $('#range');
sliderValue.on('input', function() {
  var val1 = this.value / 100;
  var val2 = 1 - val1;
  $('<style> #filter:before {background: linear-gradient(to top, rgba(255,255,255,1.0) ' + val1*100 + '%, rgba(0,0,0,0) ' + val2*100 + '%);}</style>').appendTo("#filter");
});

CSS:

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  max-width: 400px;
  background-color: #ccc;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

#filter {
  position: relative;
  float: left;
  max-height: 480px; 
}

#filter:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,1.0) 15%, rgba(0,0,0,0) 22%);
  z-index: 1;
}

Remember that the tag is meant for declaring CSS styles in the HTML page header and not for dynamically creating styles in jQuery. In the provided code snippet, we used the appendTo method to insert the dynamically generated CSS style into the #filter element.

Answer 3

Answer №2

There are a few issues with the code you provided:

Instead of appending the new style to every input, I have created an HTML element for the style that gets updated with the correct content on every input event;
The color was not displaying properly, so I changed rgba(0,0,0,0) to rgba(0,0,0,.1) to ensure it is visible;
The #filter div was overlapping the slider, preventing activation. By removing the float left property, this issue has been resolved.

var sliderValue = $('#range'),
    filterStyle = $('#filter-before');
    
sliderValue.on('input', function() {
  var val1 = this.value;
  var val2 = 100 - val1;
  filterStyle.html('#filter:before{background: linear-gradient(to top, rgba(255,255,255,1) ' + val1 + '%,rgba(0,0,0,.1) ' + val2 + '%);}');
});

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  max-width: 400px;
  background-color: #ccc;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

#filter {
  position: relative;
  max-height: 480px;
  width: 200px;
  height: 200px;
}

#filter:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 0) 22%);
  z-index: 1;
}

<style id="filter-before"></style>
<div class="container">
  <input type="range" min="0" max="100" class="slider" id="range">
  <div id="filter">
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

Answer 4

There are a few issues with the code you provided:

Instead of appending the new style to every input, I have created an HTML element for the style that gets updated with the correct content on every input event;
The color was not displaying properly, so I changed rgba(0,0,0,0) to rgba(0,0,0,.1) to ensure it is visible;
The #filter div was overlapping the slider, preventing activation. By removing the float left property, this issue has been resolved.

var sliderValue = $('#range'),
    filterStyle = $('#filter-before');
    
sliderValue.on('input', function() {
  var val1 = this.value;
  var val2 = 100 - val1;
  filterStyle.html('#filter:before{background: linear-gradient(to top, rgba(255,255,255,1) ' + val1 + '%,rgba(0,0,0,.1) ' + val2 + '%);}');
});

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  max-width: 400px;
  background-color: #ccc;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

#filter {
  position: relative;
  max-height: 480px;
  width: 200px;
  height: 200px;
}

#filter:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 0) 22%);
  z-index: 1;
}

<style id="filter-before"></style>
<div class="container">
  <input type="range" min="0" max="100" class="slider" id="range">
  <div id="filter">
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

Answer 5

Answer №3

It has been pointed out in previous responses that there were several issues with your original code, mainly revolving around the attempts to append a <style> element to the document upon each input event triggered on the sliderValue element. Unfortunately, the sliderValue Object was a jQuery Object devoid of an oninput method.

To associate an event-handler with a jQuery Object, you should utilize the on() method:

sliderValue.on('<eventName>', function(){
  // functionality
});

Instead of delving into improved jQuery practices covered by others, I wanted to demonstrate how this could be accomplished using vanilla JavaScript and CSS custom-properties (with explanatory notes included in the code):

// utility functions for brevity:
const D = document,
  get = (selector, context = D) => context.querySelector(selector),
  getAll = (selector, context = D) => [...context.querySelectorAll(selector)];
  
// triggering an input-event once an event-handler is bound:
let inputEvent = new Event('input'),
    updateGradient = (evt) => {
        let updated = evt.currentTarget,
            target = get(updated.dataset.updates);
        
        target.style.setProperty(`--${updated.name}`, updated.value)
},
updaters = getAll('input[data-updates]');

updaters.forEach(
  (el) => {
    el.addEventListener('input', updateGradient);
    el.dispatchEvent(inputEvent);
  });

:root {
  --spacing: 1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  min-block-size: 100%;
  padding-block: var(--spacing);
}

main {
  block-size: 100%;
  border: 1px solid #000;
  display: grid;
  gap: var(--spacing);
  inline-size: clamp(30rem, 80%, 1200px);
  margin-inline: auto;
}

form {
  display: grid;
  gap: var(--spacing);
  padding: var(--spacing);
}

label {
  display: flex;
  gap: var(--spacing);
}

.labelText {
  flex-grow: 1;
  text-align: end;
}

.labelText::after {
  content: ':';
}

label > input {
  flex-basis: 70%;
}

.preview {
  --color1: rgba(255 255 255 / 1);
  --color2: rgba(0 0 0 / 1);
  --stop: 50;
  aspect-ratio: 2;
  background-image:
    linear-gradient(
      180deg,
      var(--color1, lightskyblue)
      calc(var(--stop) * 1%),
      var(--color2, lime)
      calc(var(--stop) * 1%)
    );
}

<main>
  <form action="#" method="post">
    <label>
      <span class="labelText">Color 1</span>
      <input type="color" name="color1" value="#000000" data-updates=".preview">
    </label>
    <label>
      <span class="labelText">Color 2</span>
      <input type="color" name="color2" value="#ff9900" data-updates=".preview">
    </label>
    <label>
      <span class="labelText">Gradient stop (%)</span>
      <input type="range" name="stop" min="0" max="100" value="25" data-updates=".preview">
    </label>
    <button type="submit">Submit</button>
  </form>
  <div class="preview"></div>
</main>

View JS Fiddle demo.

References:

Answer 6

It has been pointed out in previous responses that there were several issues with your original code, mainly revolving around the attempts to append a <style> element to the document upon each input event triggered on the sliderValue element. Unfortunately, the sliderValue Object was a jQuery Object devoid of an oninput method.

To associate an event-handler with a jQuery Object, you should utilize the on() method:

sliderValue.on('<eventName>', function(){
  // functionality
});

Instead of delving into improved jQuery practices covered by others, I wanted to demonstrate how this could be accomplished using vanilla JavaScript and CSS custom-properties (with explanatory notes included in the code):

// utility functions for brevity:
const D = document,
  get = (selector, context = D) => context.querySelector(selector),
  getAll = (selector, context = D) => [...context.querySelectorAll(selector)];
  
// triggering an input-event once an event-handler is bound:
let inputEvent = new Event('input'),
    updateGradient = (evt) => {
        let updated = evt.currentTarget,
            target = get(updated.dataset.updates);
        
        target.style.setProperty(`--${updated.name}`, updated.value)
},
updaters = getAll('input[data-updates]');

updaters.forEach(
  (el) => {
    el.addEventListener('input', updateGradient);
    el.dispatchEvent(inputEvent);
  });

:root {
  --spacing: 1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  min-block-size: 100%;
  padding-block: var(--spacing);
}

main {
  block-size: 100%;
  border: 1px solid #000;
  display: grid;
  gap: var(--spacing);
  inline-size: clamp(30rem, 80%, 1200px);
  margin-inline: auto;
}

form {
  display: grid;
  gap: var(--spacing);
  padding: var(--spacing);
}

label {
  display: flex;
  gap: var(--spacing);
}

.labelText {
  flex-grow: 1;
  text-align: end;
}

.labelText::after {
  content: ':';
}

label > input {
  flex-basis: 70%;
}

.preview {
  --color1: rgba(255 255 255 / 1);
  --color2: rgba(0 0 0 / 1);
  --stop: 50;
  aspect-ratio: 2;
  background-image:
    linear-gradient(
      180deg,
      var(--color1, lightskyblue)
      calc(var(--stop) * 1%),
      var(--color2, lime)
      calc(var(--stop) * 1%)
    );
}

<main>
  <form action="#" method="post">
    <label>
      <span class="labelText">Color 1</span>
      <input type="color" name="color1" value="#000000" data-updates=".preview">
    </label>
    <label>
      <span class="labelText">Color 2</span>
      <input type="color" name="color2" value="#ff9900" data-updates=".preview">
    </label>
    <label>
      <span class="labelText">Gradient stop (%)</span>
      <input type="range" name="stop" min="0" max="100" value="25" data-updates=".preview">
    </label>
    <button type="submit">Submit</button>
  </form>
  <div class="preview"></div>
</main>

View JS Fiddle demo.

References:

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Answer №1

Answer №2

Answer №3

Similar questions

Uncovering the xpath of an element within an iframe using QTP

Issue with reverse document referencing in Mongoose

Tips for postponing the removal of a class in a Bootstrap 4 dropdown mega menu?

The Datalist feature in HTML5 offers an auto-suggest functionality that displays a list of options beginning with the

The JSON and AJAX are functioning properly on Firefox, however, they are not working on Chrome

Refrain JavaScript - sift through an array of objects based on the values of a primitive array in linear time

Vue.js is throwing an error because it cannot find the property or method "blah" when referencing it during rendering

Universal message/status/error that can be utilized in both jquery and C# programming

Developing a matrix arithmetic parser using JavaScript

Only send file input to the server when it is changed, and disregard any other inputs until the form is submitted

Master the art of sending multiple asynchronous requests simultaneously with suspense in Vue 3

Unusual Display of Mantine Radio Button

SWF file redirection with a flash blast

Steps for formatting and retrieving the <style jsx> string from a function within a React or Nextjs application

Guide to organizing an express.js project structure:

Encountering a React.js issue when attempting to update data

Eliminate the bottom border from the MUI Input component

Build desktop-style applications using a unique user interface library and integrated development environment designed specifically for HTML, JavaScript

Organizing AngularJS ng-repeat into sets of n items

The Vue Swiper does not support inline containers in my code