2013-08-21 4 views
0

С JQ UI я создал стандартный слайдер. Я узнал, как изменить некоторые из его параметров: размер, минимальный размер, максимальный и т. Д., Но так и не нашел место, помещенное на изображение. То есть: измените слайдер.Изменение ползунка по умолчанию 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> 
+1

ли вы имеете в виду [** как это **] (http://jsfiddle.net/YYMaH/)? –

+0

@ Zeaklous напишите как ответ – apaul

ответ

0

Если вы имеете в виду изменение зеленой зоны к изображению вместо этого, вы можете изменить background-color к background-image или просто background, а затем положить дать ему URL или местоположение изображения, которое вы хотите. Demo here

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

Если вы хотите, чтобы быть как выше, так и ниже ползунка, вы можете сделать это, давая .ui-slider-range прозрачный фон, как так

.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

+0

Большое спасибо. Ответ найден. Тема закрыта. –

+0

Еще раз спасибо :) –

+0

Нет проблем вообще –

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