Creating a stylish background gradient between two handles on a jQuery Slider with CSS

After watching a presentation by Lea Verou on CSS Variables titled CSS Variables: var(--subtitle);, I was inspired to create a gradient effect between jQuery Slider handles:

$(function() {
  var max = 400;
  var $slider = $('.slider');
  function set(a, b) {
    $slider[0].style.setProperty("--from", (a / max) * 100);
    $slider[0].style.setProperty("--to", (b / max) * 100);
  }
  set(100, 200);
  $slider.slider({
    values: [100, 200],
    min: 0,
    max: max,
    slide: function(event, ui) {
      set.apply(null, ui.values);
    }
  });

});
.slider {
  background: linear-gradient(to right, blue calc(var(--from) * 1%), transparent 0, transparent 0) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<div class="slider"></div>

Answer №1

Here is the solution code:

$(function() {
  var rangeMax = 400;
  var $slider = $('.slider');
  function setSliderValues(valueA, valueB) {
    $slider[0].style.setProperty("--from", (valueA / rangeMax) * 100);
    $slider[0].style.setProperty("--to", (valueB / rangeMax) * 100);
  }
  setSliderValues(100, 200);
  $slider.slider({
    values: [100, 200],
    min: 0,
    max: rangeMax,
    slide: function(event, ui) {
      setSliderValues.apply(null, ui.values);
    }
  });

});
.slider {
  background: linear-gradient(to right, transparent calc(var(--from) * 1%), red 0, red calc(var(--to) * 1%), transparent 0) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<div class="slider"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the value with `eventArgs.get_value()` function to obtain the selected text instead of the ID

When I populate a textbox with autocomplete using the code below, it only returns the selected text and not the rowid. Any idea why alert(eventArgs.get_value()) doesn't return the actual ID of the row in SQL? <script language="javascript" type="te ...

The server encountered a "Cannot GET /socket.io" error while trying

I am experiencing an issue with my app that uses express/socket.io. The app is running smoothly without any errors, but when I make an http-request, I receive the following error message: GET http://xxxxxxx.com:3035/socket.io/1/?t=1449090610579 400 (Bad R ...

Instructions for sending an email through a form while displaying a pop-up message

My Objective To create a functionality on my website where users can input their email addresses in a form and receive a validation popup indicating whether the email is valid or not. Background Information I am currently working on a website that allow ...

Animate linear-gradient using jQuery script

I have been searching for a circular progress bar plugin but haven't found one that suits my needs, so I decided to build my own using pure CSS: http://jsfiddle.net/9RFkw/ While it looks great, there are two issues I am facing: 1.) When at 25% in F ...

Set the scroll position to the top left corner (0,0) when a link to the current route is clicked or pressed

In my React application, I am faced with a challenge. When the user is on the route /gallery/images and clicks on a link (such as <a> or <Link> from react-router-dom) that leads to the same route currently being displayed, how can I detect thes ...

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines. While everything looks fine on my PC and even when using Dev Tools t ...

developing a loading animation with progress indicator in CSS3

I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...

A tutorial on creating circular patterns within a pyramid structure using p5.js and matter.js

I've been attempting to create a pyramid shape using multiple circles, similar to this: balls in pyramid shape To achieve this, I've developed a 'Balls' class: class Balls { constructor(x, y, radius, color, ballCount) { this.x = ...

Is it possible to categorize elements for focus and onblur events?

In my search feature, I have implemented an autocomplete div that appears when the user types in a search field. The issue I am facing is that I want the div to disappear when the user clicks outside of it. Here is what I have attempted: //SHOW THE DIV WH ...

Deciphering the hierarchy of z-index stacking

I'm feeling a bit puzzled about how to determine the stacking order using z-index. I am struggling to grasp how browsers handle elements with the position property in comparison to those without it. Is there a set rule to establish the stack order o ...

Saving URLSearchParams to a file using javascript

I am currently implementing jstree and I need to be able to click on a file within the tree structure in order to display a PDF file. Below is the relevant code snippet: $(function () { $('#tree').jstree({ 'core' : { ...

Is pl/pgsql block code supported by postgres-nodejs?

I am attempting to define a custom UUID variable that can be utilized across multiple queries within a transaction. Initially, I attempted using a JavaScript variable which ultimately defeated the purpose of declaring the variable on the server side. The ...

Changing the arrow in jQuery's slideToggle for different div elements is a breeze

Good day, I'm struggling with getting the arrow switch to work correctly for slideToggle. Even though I have three of them, the arrow changes only for the first one - no matter which div I click on. Any suggestions on what I might be missing? Thank yo ...

Accessing CSS content from a bundle within the code of an ASP.NET MVC website

I have a website that utilizes bootstrap along with a customized bootstrap theme. The website is designed to send notification emails to its users upon certain actions being triggered. For these notification emails, I want the content to be in well-format ...

Mongoose makes sure that duplicate rows are not repeated in the database

I'm working with a basic mongoose schema definition below: const mongoose = require('mongoose'); const followSchema = new mongoose.Schema({ follower: { type: mongoose.Schema.Types.ObjectId, ref: 'User', ...

What is the process of invoking Link manually in React-router?

I am working on a component that is passed a <Link/> object from react-router as a prop. When the user clicks on a 'next' button within this component, I need to manually trigger the <Link/> object. Currently, I am using refs to acce ...

Another option for replacing <BR> tags with CSS styling

I am currently utilizing the br tag to insert line breaks in my website's faq section. Although the output is accurate, I'm exploring alternatives like implementing linebreak through CSS to enhance responsiveness. During my research, I came acros ...

Retrieve the key values from an object of a generic type

Is there a way to retrieve the keys of the object when it is of type T? I attempted to accomplish this using different methods such as: function getGenericTypeKeys<T>(): string[] { return Object.keys({} as T); } and function getGenericTypeKeys< ...

What is the best way to retrieve the value of a button using javascript?

After trying to extract the value from a button in JavaScript, here is the code I used: for(i=0; i<cars.length;i++){ var p = `<button id="myBtn" onclick="myFunction()" value="${cars[i]}">${cars[i]}</button>` func ...

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...