jQuery UI Widgets › Forums › Editors › ScrollBar, Slider, BulletChart, RangeSelector › How to change the slider thickness?
This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 4 months ago.
Currently, the slider bar is around 8 pixels thick (=========O==========). I want to make it a thin slider bar (——–O——–). I’ve looked at the slider js files and css files, but there seems to be no place to change the thickness of it. Please help. Also, I want the slider to be a full circle rather than a rectangle with curved edges.
Hello nkipe,
Here is an example which shows how to make the slider thinner via css. You can change the shape of slider in jqx-slider-slider class.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>jQuery Slider Sample</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
<style type="text/css">
#jqxslider .jqx-slider-track-horizontal {
height: 3px;
}
</style>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxslider").jqxSlider({ theme: 'summer', value: 7 });
});
</script>
<div id='jqxslider'></div>
</div>
</body>
</html>Best Regards,
Nadezhda
jQWidgets team
http://www.jqwidgets.com/
You must be logged in to reply to this topic.