I'm trying to load a range slider in PHP (slider like one of http://ghusse.github.io/jQRangeSlider/demo.html).
This is the slider in HTML, which works (see: http://www.leff-design.nl/websites/sliderpreview/test.html):
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="jQAllRangeSliders-min.js"></script>
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script>
//<!--
$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});
//-->
</script>
</body>
</html>
Now I tried to set this to php but don't know exactly how to do this. I tried this (it's not the full php code but just a part of an Advanced custom field plugin php file):
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fields/css/iThing.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/jQAllRangeSliders-min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).load(function() {
$('#slider').editRangeSlider();
});
})(jQuery);
</script>
<?php
function create_field( $field )
{
{
echo '<script type="text/javascript">$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});</script>';
}
}
new acf_field_number_range();
?>
Also tried to echo the slider code but it does nothing. It does not get the right css classes like in the HTML file. How do I exactly connect the #slider id with the jquery files in php?
Thanks in advance.
