range slider inside panel doesn't work

range slider inside panel doesn't work

I have some sort of canvas paint apss on mobile. I would like to increase the paint brush size simply with a range slider but as soon as I increase the value in the slider, the paint brush size does'nt seem to increase at all. Here's the code. I put the range slider inside a panel

  2. <div data-role="panel" data-position="bottom" data-display="overlay" id="bottompaneloverlay2" data-theme="a">
  3.    <div class="ui-bar ui-bar-c">
  4.    <form id="largeurs_pinceau">
  5.  <label for="largeurs_pinceau">Brush Size:</label>
  6.  <input id="largeurs_pinceau" name="largeurs_pinceau" data-mini="true" type="range" data-highlight="true" min="2" max="50" value="5" />
  7.   <output id="output">5 pixels</output>
  8.          
  9.         </form>

  11. </div>
and the javascript of the following is as follows

  2. $("#largeurs_pinceau input[type=range]").change(function() {
  3. if (!isNaN($(this).val())) {
  4. width_brush = $(this).val();
  5. $("#output").html($(this).val() + " pixels");
  6. }
  7. });
could anyone tell me what seems to be the problem here? Thanks in advance