• 0

Dynamically change the color of an HTML range element


Question

I was wondering if there is a way to dynamically change the color of an HTML range element. For example, let's say I have 3 sliders (1 for red, 1 for green, 1 for blue). I want to change the intensity of each color on the slider based on the value of the slider. An example of what I have so far is located at http://jsfiddle.net/aa5kh/ 

7 answers to this question

Recommended Posts

  • 0

Does any body have any ideas regarding this issue? 

 

EDIT: Oops! I just noticed that the fiddle isn't there for some reason. I copied the url while I was there, but I guess I had to save it. I will recreate it. Sorry for the confusion!

  • 0

My quick idea: http://jsfiddle.net/bataA/7/

The sliders change the text color.

 

Notice that I used rgb() css property which is not much compatible with old browsers. But this is the easiest I think.

 

edit: it looks like in Chrome the color only updates when I let go the mouse button, but in IE 11 it updates as the slider moves.

 

edit2: I modified the jquery so it updates the color in Chrome immediatelly as well. http://jsfiddle.net/bataA/15/

  • 0

HTML :

<input type="range" id="red" min="0" max="255" />
<input type="range" id="green" min="0" max="255" />
<input type="range" id="blue" min="0" max="255" />
<input type="text" id="color" />

 

CSS :

input[type=range]::-webkit-slider-thumb {
     -moz-appearance: none;
     border-radius: 20px;
     background-color: #FFF;
     box-shadow:
        inset 0 0 16px #B2B200,
        inset 16px 0 20px #FFFF33;
     border: 2px solid #292908;
     height: 20px;
     width: 20px;
}

#color {
width: 100px;
background-color: black;
}
 

JScript :

var r = 0;
var g = 0;
var b = 0;

$('input[type=range]').each(function() {
    $(this).bind('change', function() {
        r = $('#red').val().toString(16);
        g = $('#green').val();
        b = $('#blue').val();
        
        var colorrgb = r+","+g+","+b;
        
        $("#color").css("background-color", "rgb("+colorrgb+")");
        
    });
});

  • 0
  On 21/05/2014 at 12:58, nyolc8 said:

If I missunderstood you and you actually want to change the sliders colors, then here it is(may look messy but works): http://jsfiddle.net/bataA/45/

 

That is very close to what I want, but I want to change the thumb within the control to that color. Thank you for your help so far. I appreciate it!

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • The only thing Made in the USA is the two morons running the company
    • Nvidia 576.80 WHQL graphics driver fixes 5090 FE on idle, adds new games, and more by Taras Buria Nvidia has released a new graphics driver with support for new games and a long list of various fixes. If you have a compatible graphics card, you can download driver 576.80 WHQL. It adds optimizations and day-0 support for FBC: Firebreak, DLSS 4 and multi-frame generation for REMATCH, and path tracing support for DOOM: The Dark Ages. Fixed gaming bugs in driver 576.80 include the following: Dune: Awakening: stability issues EA Sports FC 25: stability issues Dragons Dogma 2: displays shadow flicker Clair Obscur: Expedition 33: stability issues Enshrouded: crashes after launching game Monster Hunter World: stability issues when playing in DX12 mode Gray Zone Warfare: stability issues Marvel Rivals: stability issues Ghost of Tsushima Directors Cut: Flickering/corruption around light sources GTA V Enhanced: stability issues Honor of Kings: World: stability issues Forza Horizon 5: stability issues Indiana Jones and The Great Circle: Image corruption And here is the list of general bugs that have been fixed: GeForce RTX 5090 FE acoustic improvements for idle and low loads Changing a setting in the NVIDIA Control Panel -> Manage 3D Settings may trigger shader disk cache rebuild Twinmotion: Bugcheck when attempting to launch Adobe Substance 3D Painter: showing viewport corruption after baking BlackmagicDesign: UI overlay in Fusion page is not displayed correctly Video playback in a web browser may show brief red/green flash corruption Videos captured with NVIDIA App may appear washed out after editing with the Windows Photos app Certain DisplayPort 1.4 monitors may display random black screen flicker when connected to DisplayPort 2.1 graphics card In addition to the new driver, Nvidia released a new version of the Nvidia app, which now supports DLSS 4 override options under Driver Settings > Graphics for supported titles. With today's release, DLSS override is available for 46 new games, such as DCS World, F1 25, Frostpunk 2, Avowed, and more. The full list of new games is available here. Also, the Nvidia app now has optimal settings for Dune: Awakening, F1 25, FBC: Firebreak, and REMATCH. You can download the driver Nvidia 576.80 WHQL from the official website or the Nvidia app. Full release notes are available here (PDF).
  • Recent Achievements

    • Experienced
      dismuter went up a rank
      Experienced
    • One Month Later
      mevinyavin earned a badge
      One Month Later
    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
  • Popular Contributors

    1. 1
      +primortal
      703
    2. 2
      ATLien_0
      271
    3. 3
      Michael Scrip
      213
    4. 4
      +FloatingFatMan
      186
    5. 5
      Steven P.
      143
  • Tell a friend

    Love Neowin? Tell a friend!