기본 슬라이더 변경 JQ UI

JQ UI를 사용하여 표준 슬라이더를 만들었습니다. 나는 그것의 매개 변수의 일부를 변경하는 방법을 알아 냈습니다 : size, min.size, maximum, 등등. 그러나 결코 장소를 찾지 못했습니다. 즉 : 슬라이더를 변경하십시오. 대신 이미지의 녹색 영역 변경을 의미하는 경우기본 슬라이더 변경 JQ UI

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Slider - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<style> 
#slider-vertical { 
    height: 600px; 
    background-color: #0F3; 
} 
</style> 
<script> 
$(function() { 
    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function (event, ui) { 
      $("#amount").val(ui.value); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="slider-vertical"></div> 
</body> 
</html>

출처

2013-08-21 Donskov Andrey

같은 투명한 배경 .ui-slider-range를 제공함으로써 그것을 할 수 있습니다 이렇게 **] (http://jsfiddle.net/YYMaH/)? –

@Zeaklous 대답으로 답변을 작성하십시오 – apaul

, 당신은 background-colorbackgroundbackground-image에하거나 변경 한 후 당신이 원하는 이미지의 URL 또는 위치를 제공 넣을 수 있습니다. 당신이 위의 슬라이더 아래에 둘 수 있도록하려면 Demo here

#slider-vertical { 
    height: 600px; 
    background: url(backgroundImage.jpg); 
}

, 당신은 ** 당신이 [의미합니까 그래서

.ui-slider-range { 
    /* If you want the same image as the top part of the slider. */ 
    /* Otherwise you can change the bottom portion here */ 
    background:transparent; 
}

Demo here

출처

2013-08-21 15:36:07

많은 감사. 대답이 있습니다. 주제가 마감되었습니다. –

다시 한번 감사드립니다. –

전혀 문제가 없습니다. –

기본 슬라이더 변경 JQ UI

답변

관련 문제