Menu
I'm teaching myself jQuery and starting on jquery-ui using a slider control. I have it hooked up and functionally it works well, setting some global page variables when I slide the handle. It does not, however, look like the slider on the jquery-ui demo page.
It's a horizontal slider and I can control the length of the bar by setting the CSS width property of the that jquery-ui converts to the slider. But the bar is about two or three times "thicker" than the one on the demo page, and the slider handle is proportionately larger. It looks ok, but not as good as the one on the demo page.
Taking the width setting as a hint, I tried setting the CSS height property of the underlying . That changed the height of the bar part, but not the handle which now looked outsize.
Here is the header:
<head>
<title>The Memory Game</title>
<link href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/memoryGame.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/memoryGame.js" type="text/javascript"></script>
</head>
Here is the HTML markup:
<div id="control-panel" class="ui-state-default">
<div id="slider" style="width: 150px"></div>
</div>
Here is my CSS for control-panel:
div#control-panel {
padding: 10px;
float: right;
}
And here is the jQuery in which I apply the slider:
$('#slider').slider({
max: 10000,
value: waitTime,
change: function(event, ui) {
waitTime = ui.value;
fadeTime = waitTime / 3;
}
});
Can anyone suggest how I can scale the thickness of my slider or at least get the same thickness shown on the jquery-ui demo page?
597
The slider size is controlled by the 'font-size' css property. You want to decrease the font-size of the parent element.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
