Question

I’m trying to do:

Decreasing the temperature values of the slider, I need that circle that represents the star gradually increase and change background color as this link: http://astro.unl.edu/naap/hr/animations/hrExplorer.html

But my code isn’t doing it…..See lines from $(“#s_tem”).slider({
See my code: http://jsfiddle.net/NxNXJ/19/

Thanks..

Answer 1

You are assigning the variable chosenColor values like: #597459745974

Which are not valid CSS color attributes.

[Edit] Here’s some code that should get you going:

$("#s_tem").slider({
    change: function(event, ui)
    {       
        var hexValue = ui.value.toString(16).toUpperCase();
        if (hexValue.length < 2) hexValue = "0" + hexValue;

        var chosenColor = NumberToHexColor(hexValue);

        $('#t_tem').val(chosenColor);
        $("#star").css('background-color', chosenColor);

    },
    value: 5800,
    min: 2300,
    max: 40000,
    step: 100,  
});

function NumberToHexColor(Number)
{
    var HexColor = '' + Number;
    while (HexColor.length < 6) 
    {
        HexColor = '0' + HexColor;
    }

    return '#'+ HexColor;
}