jQuery Mobile：刪除rangeslider標籤並使滑塊更寬

JQM rangeslider對我的手機應用程序太小。所以我決定刪除兩邊的兩個標籤。 display：none方法只隱藏標籤，但不會釋放更大範圍滑塊的空間。如何使它更寬？我嘗試了ui-slider-track，width = 100％，但沒有奏效。jQuery Mobile：刪除rangeslider標籤並使滑塊更寬

感謝您的任何幫助。

<!DOCTYPE html> 
<html> 
<head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,height=device-height,user-scalable=no"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<style type=text/css> 

input.ui-input-text.ui-slider-input { 
    display: none; 
} 

.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track { 
    background: red; 
} 

</style> 
</head> 
<body> 
<div data-role="page" id="FrontPage"> 

    <div data-role="content"> 
    <div data-role="rangeslider" id="DateSlider"> 
     <label for="range-1a" id="label-1a">Rangeslider:</label> 
     <input type="range" name="range-1a" id="range-1a" min="0" max="364" value="127" step="3"> 
     <label for="range-1b">Rangeslider:</label> 
     <input type="range" name="range-1b" id="range-1b" min="1" max="365" value="253" step="3"> 
    </div> 
    </div><!-- /content --> 
</body> 
</html>

來源

2013-09-26 ttkrpink

ADD

.ui-rangeslider .ui-rangeslider-sliders{ 
margin: 0px; 
}

JS小提琴http://jsfiddle.net/devmgs/vY5R6/

來源

2013-09-26 08:50:10 dev

的偉大工程。謝謝 – ttkrpink

您可以調整左/右頁邊距

.ui-rangeslider .ui-rangeslider-sliders { 
    margin-right: 0; 
    margin-left: 0; 
}

樣品的jsfiddle：http://jsfiddle.net/nirmaljpatel/SvCD3/

來源

2013-09-26 08:56:49

這個也很棒。我選擇另一個，因爲它的編碼較少。 :)很高興知道我可以保證雙方。謝謝。 – ttkrpink

jQuery Mobile：刪除rangeslider標籤並使滑塊更寬

回答

相關問題