Home/ Questions/Q 7685353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T19:13:55+00:00

I have also tried .(‘refresh’) and .page() to no avail. The text-box updates but

  • 0

I have also tried .('refresh') and .page() to no avail.

The text-box updates but not the slider position, so as soon as you touch it, the value drops back down. You can see this behavior here: http://www.webeshoppin.info/st0.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tax</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <link href="css/tax.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>  
</head>
<body>
<div id="page2" data-role="page"  data-add-back-btn="true">
    <div data-role="header">
        <h4> The Proposed</h4>
        <a href="#decisions" data-icon="arrow-r" data-role="button" id="joinls">next</a>
    </div><!-- /header -->
    <div data-role="content">
        <h5>Ducks are Fum</h5>
        <div>       
            <input type="range" min="0"  max="150" id="inp1" value="34"/>
        </div>
        <div>
            <a id="but1" href="#" data-role="button" data-mini="true" >but1</a>  
        </div>
        <div id="txthere"></div>
    </div>
</div>      
</body>
</html> 

<script>
var data =87;
$('#page2').live('pageinit', function(event) {    

    $("#inp1").val(data).trigger('create');
    $("#but1").click( function (e) {    
        data +=1;
        console.log(data);
        $("#txthere").append(data+'<br/>');
    });    
    $("#inp1").change( function(e){
        data = Number($(this).val());
        console.log(data);
        $("#txthere").append(data+'<br/>');
    });     
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should use .slider('refresh') to refresh the widget rather than .trigger('create')
    which is meant to initialize an un-initialized widget.

    refresh update the slider

    If you manipulate a slider via JavaScript, you must call the refresh
    method on it to update the visual styling.

    $(‘.selector’).slider(‘refresh’);

    Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/slider/methods.html

    Here is a demo: http://jsfiddle.net/s63pt/

    • 0