jquery ui info в html

Я ищу, чтобы поместить var h в 360 цветовое пространство в html ниже. , когда ползунок перемещается от 0 до 360. Я хочу, чтобы это значение заменило 360 в цветовом пространстве hsl: hsl (360, 100%, 50%). Я хочу изменить цвет текста при перемещении слайдера.jquery ui info в html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Range with fixed maximum</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
    $("#slider-range-max").slider({ 
     range: "max", 
     min: 0, 
     max: 360, 
     value: 0, 
     slide: function(event, ui) { 
     $("#amount").val(ui.value); 
    var h = ui.value; 
     } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
    }); 
    </script> 
</head> 
<body> 

<p> 
    <label for="amount">Minimum number of bedrooms:</label> 
    <input type="text" id="amount" readonly style="border:0; color:hsl(360, 100%, 50%); font-weight:bold;"> 
</p> 
<div id="slider-range-max"></div> 


</body> 
</html>

источник

2016-03-04 wdaniel

Вы можете использовать метод css обновить color:

$(function() { 
    $("#slider-range-max").slider({ 
    range: "max", 
    min: 0, 
    max: 360, 
    value: 0, 
    slide: function(event, ui) { 
     $("#amount").val(ui.value); 
     $("#amount").css("color", "hsl(" + ui.value + ", 100%, 50%)"); 
    } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
});

Fiddle Demo

источник

2016-03-04 15:17:21 Yass

спасибо спасибо спасибо спасибо, что работает – wdaniel

@wdaniel Добро пожаловать. Пожалуйста, примите ответ, чтобы он помогал другим, спасибо. – Yass

как принять – wdaniel

jquery ui info в html

ответ

Смежные вопросы