Ich habe ein Div mit fester Breite und mit CSS angewendetem Farbverlauf. Ich möchte einen auf Schiebereglern basierenden Farbwähler auf der Grundlage dieses Verlaufs erstellen.

Wenn ich den Schieberegler ziehe, berechne ich die prozentuale Position und möchte den Hex- oder RGB-Farbcode basierend auf diesem Wert erhalten.

Meine Idee war, ein Array mit den definierten Start- / Stopp-Positionen und Farben zu erstellen, dann zwei Werte aus diesem Array basierend auf der Schiebereglerposition zu finden und dann irgendwie die Farbe dazwischen zu finden: Hier kann ich mich nicht vorwärts bewegen.

Demo:http: //jsfiddle.net/pdu8rpfv

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});