• 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

    • I can't believe it was only two years since the last time MS raised their prices and now they think they can do it again so soon. Of course they needed to backtrack on this. I hope Nintendo is next.
    • I guess I gotta be even more specific then since I'm looking for an absolute confirmation.  The mini PC has never booted up or powered on by me. I'm assuming it'll be like buying a new PC from a store. Nothing is set up. Like absolutely nothing on the mini PC because I can't emphasize this enough. My USB drive already has Windows set up on it from my other desktop so I know it's clean. So now I connect it to the mini PC before it's even booted up or go to the desktop. I then turn on the mini PC and boot into the USB drive. I should see an existing partition. I'll delete it and then install Windows again over the entire drive. I don't necessarily want to create a separate partition. Once it installs and boots to the desktop, I'm assuming the drive is "clean" and free of any malware/viruses. Basically, this process will eliminate any potential for malware/viruses to still somehow hide in the SSD and then potentially affect me later.  I'm being very anal about this because I really don't trust anything bought from AliExpress, but the price was very tempting.  Is Windows Defender reliable? Afterwards, if I do a full scan and it doesn't find anything in the SSD and the USB drive, can I be confident the mini PC is now safe and secured to enter my banking credentials? If not, what else can I do to be absolutely certain?
    • I got an ESR Qi2 vent charger for my car and it's fantastic. It's very strong magnet and holds the phone securely over the worst potholes/roads, and my iPhone does charge. In Summer, the AC blows on the vent keeps and keeps the phone cold. In winter, I just close that vent, so it still stays cold. I agree with you on the Android front. Why not just build in the magnets like Apple does? It's frustrating to buy a case that adds magnets.
    • Hey, I've been using Windows since I was a little tyke. But for the last 15 years, I have been using Linux. I'm using EndeavourOS/Arch atm. wipe it, as in deleting anything from the SSD in the computer. Make a new partition. USB booting device should be free of malware, as long as you download it directly friom MS. Not some XYZ company.
    • "Nuking it" is slang for doing a clean install. USB installation media... delete the partition... start fresh.
  • Recent Achievements

    • Collaborator
      fernan99 earned a badge
      Collaborator
    • Collaborator
      MikeK13 earned a badge
      Collaborator
    • One Month Later
      Alexander 001 earned a badge
      One Month Later
    • One Month Later
      Antonio Barboza earned a badge
      One Month Later
    • Week One Done
      Antonio Barboza earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      584
    2. 2
      ATLien_0
      219
    3. 3
      Michael Scrip
      173
    4. 4
      Xenon
      138
    5. 5
      +FloatingFatMan
      127
  • Tell a friend

    Love Neowin? Tell a friend!