source: extensions/memories/admin.tpl

{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}

{footer_script}
jQuery(function($) {

  jQuery('.eiw').delay(2000).slideUp();

// slide
    $('.range').each(function(){
        var cls=$(this).attr('class');
        var elem=$(this).parent();
        var input=elem.find('input');
        var options={};
        elem.append('<div class="uirange"></div>');
        options.slide=function(event,ui){
            elem.find('label span').empty().append(ui.value);
            input.val(ui.value);
        }
        options.value=input.val();
        options.range='min';
        options.min=$(this).data('min');
        options.max=$(this).data('max');
        elem.find('.uirange').slider(options);
        elem.find('label span').empty().append(input.val());
        input.hide();
    });
});
{/footer_script}

{html_style}
.uirange{
    margin:10px;
    margin-left: 40px;
}
.pfoyaradio{
        padding-left: 100px
}
{/html_style}

<div class="titrePage">
    <h2>{'Memories'|@translate}</h2>
</div>

<form method="post">
 <fieldset>
  <legend>{'Configuration'|translate}</legend>
    <p class="input" style="width: 700px;">
        <label for="range"><strong>{'Number of years you want see'|@translate} </strong><span></span></label>
        <input type="text" name="submitpfoyadatemax" data-min="1" data-max="50" class="range" value="{$PFOYA_DATEMAX}"/>
    </p>
    <p>
        <strong>{'Chosen date type'|@translate}</strong> 
        <div class="pfoyaradio">{html_radios separator="<br>" name="submitpfoyadateb" values=$PFOYA3 output=$PFOYA3T selected="{$PFOYA_DATE}"}</div>
    </p>
        <p>
        <strong>{'Show other years on plugin page'|@translate}</strong> 
        <div class="pfoyaradio">{html_radios separator="<br>" name="submitpfoyashow" values=$pfoya4 output=$pfoya4T selected="{$PFOYA_SHOW}"}</div>
    </p>
        <p>
        <strong>{'Show menu'|@translate}</strong> 
        <div class="pfoyaradio">{html_radios separator="<br>" name="submitpfoyamenu" values=$pfoya2 output=$pfoya2T selected="{$PFOYA_MENU}"}</div>
    </p>
        <p class="input" style="width: 700px;">
        <label for="range"><strong>{'link position in menu'|@translate} </strong><span></span></label>
        <input type="text" name="submitpfoyaposition" data-min="1" data-max="10" class="range" value="{$PFOYA_POSITION}"/>
    </p>
        <p class="input" style="width: 700px;">
        <label for="range"><strong>{'Maximal number photos for PWG Stuffs Block'|@translate} </strong><span></span></label>
        <input type="text" name="submitpfoyanip" data-min="1" data-max="60" class="range" value="{$PFOYA_NIP}"/>
    </p>
        <p>
        <strong>{'Show other years in PWG Stuffs block'|@translate}</strong> 
        <div class="pfoyaradio">{html_radios separator="<br>" name="submitpfoyashowps" values=$pfoya8 output=$pfoya8T selected="{$PFOYA_SHOWPS}"}</div>
    </p>
        <br>
        <br>
        <p>
                <input class="submit" type="submit" name="submitpfoya" value="{'Submit'|@translate}">
                <input class="submit" type="submit" name="resetpfoya" value="{'Reset'|@translate}">
        </p>
 </fieldset>
</form>