This is my code
<?php
defined('JPATH_BASE') or die;
jimport('joomla.html.html');
jimport('joomla.form.formfield');
JHTML::_('behavior.mootools');
class JFormFieldTlak extends JFormField{
protected $type = 'Tlak';
protected function getInput(){
$name = $this->element['name'];
$id = $this->element['id'];
$default = $this->element['default'];
$size = (int)$this->element['size'];
$this_counter = 0;
$measuring_type = $this->element['measuring_type'];
$pixels_16 = array ('40px', '100px', '160px', '220px', '280px', '340px', '400px', '460px', '520px', '580px', '640px', '700px', '760px', '820px', '880px', '940px');
$array_values = array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
$measuring;
$options;
if ($measuring_type == 'pixels'){
$measuring = $pixels_16;
}
else if ($measuring_type == 'normal'){
$measuring = $array_values;
}
$selected_ = (int)$this->value;
$selected_ --;
while ($size > 0){
$options = $options . '<option value="' . $array_values[$this_counter] . '"';
if ($selected_ == $this_counter){
$options = $options . 'selected="selected" ';
}
$options = $options . '>' . $measuring[$this_counter] . '</option>';
$this_counter ++;
$size --;
}
$this_counter = 0;
$return = '<select id="jform_params_' . $id . '" name="jform[params][' . $name . ']" default="100px" >' . $options . '</select></br></br><p id="slider_1" ></p>';
return $return;
}
}
?>
<script
src="http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-1.5.1.min.js"
type="text/javascript">
</script>
<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-ui-1.8.13.custom.min.js'>
</script>
<style type='text/css' media='all'>
@import 'http://localhost/joomla16/libraries/joomla/form/fields/css/dot-luv/jquery-ui-1.8.13.custom.css';
p#slider_1 {
overflow:visible;
z-index:1;
}
</style>
<script type='text/javascript'>
var jq = jQuery.noConflict();
jq(function() {
jq( "#slider_1" ).slider({
value:9,
min: 1,
max: 16,
step: 1,
slide: function( event, ui ) {
jq( "#jform_params_column_size" ).val( ui.value );
}
});
jq( "#jform_params_column_size" ).val( jq( "#slider_1" ).slider( "value" ) );
});
</script>
I also tried it like this
<?php
defined('JPATH_BASE') or die;
jimport('joomla.html.html');
jimport('joomla.form.formfield');
JHTML::_('behavior.mootools');
class JFormFieldTlak extends JFormField{
protected $type = 'Tlak';
protected function getInput(){
$name = $this->element['name'];
$id = $this->element['id'];
$default = $this->element['default'];
$size = (int)$this->element['size'];
$this_counter = 0;
$measuring_type = $this->element['measuring_type'];
$pixels_16 = array ('40px', '100px', '160px', '220px', '280px', '340px', '400px', '460px', '520px', '580px', '640px', '700px', '760px', '820px', '880px', '940px');
$array_values = array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
$measuring;
$options;
if ($measuring_type == 'pixels'){
$measuring = $pixels_16;
}
else if ($measuring_type == 'normal'){
$measuring = $array_values;
}
$selected_ = (int)$this->value;
$selected_ --;
while ($size > 0){
$options = $options . '<option value="' . $array_values[$this_counter] . '"';
if ($selected_ == $this_counter){
$options = $options . 'selected="selected" ';
}
$options = $options . '>' . $measuring[$this_counter] . '</option>';
$this_counter ++;
$size --;
}
$this_counter = 0;
$return = '<select id="jform_params_' . $id . '" name="jform[params][' . $name . ']" default="100px" >' . $options . '</select></br></br><p id="slider_1" ></p>';
return $return;
}
}
?>
<script
src="http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-1.5.1.min.js"
type="text/javascript">
</script>
<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-ui-1.8.13.custom.min.js'>
</script>
<style type='text/css' media='all'>
@import 'http://localhost/joomla16/libraries/joomla/form/fields/css/dot-luv/jquery-ui-1.8.13.custom.css';
p#slider_1 {
overflow:visible;
z-index:1;
}
</style>
<script type='text/javascript'>
jQuery.noConflict();
$(function() {
$( "#slider_1" ).slider({
value:9,
min: 1,
max: 16,
step: 1,
slide: function( event, ui ) {
$( "#jform_params_column_size" ).val( ui.value );
}
});
$( "#jform_params_column_size" ).val( $( "#slider_1" ).slider( "value" ) );
});
</script>