How to have background between two handles of jQuery Slider using css gradient


Tags: javascript,jquery,css

Problem :

I've just wached Lea Verou talk CSS Variables: var(--subtitle); and she give example to have gradient from 0 to slider handle, I need to have similar but 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>



Solution :

Here is solution:

$(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, 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>


    CSS Howto..

    Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

    How to arrange input elements to columns or other way to improve form readability

    How to create dropdown with multiple columns?

    How to find out and get rid of unused CSS code? [closed]

    How do you wrap long words on newline, and avoid horizontal scroll using CSS?

    How to add multiple link styles on the same page?

    CSS Question: How to prevent background from being affected by padding?

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    How can I make a split-text input placeholder?

    CSS: How can I set image size relative to parent height?

    How to increase cell height of GWT celltable : Issue with IE?

    CSS - How to centre a link button

    How to layout follow content using CSS?

    How to underline the hyper-link spreaded on two lines. CSS-HTML geeks?

    Best practice: how to name css default state? [closed]

    How to Access local CSS file from within Alfresco Javascript?

    How to stop this parent element from being affected on hover?

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How to indent text in a select drop down menu using CSS

    How to configure css flexbox so height of one of the block depends on it content?

    How to add html glyph markup to JQuery show/hide function

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    How to align p tag side by side using css?

    ASP.NET - how to retrieve CSS styles applied by javascript on page postback?

    how to set word break in table th or td, when column and table-layout auto using CSS

    ASP Listview. How to hide a table row using CSS

    How to apply styles to an element with a prefixed ID?

    How to set columns 100% height within body using css

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down