javascriptjqueryjquery-uijquery-ui-sliderjquery-ui-widget

jquery ui widget displaying as a text input

I'm trying to make a range widget like this http://jqueryui.com/slider/#range. I've copied the source code and it results in a text-input instead of a slider. This is the code I'm working with. Also I moved the style attribute to a linked css file. Doing so the output changed from nothing to the text input.

This is my head:

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script src="../jscript/questions.js"></script>
  <script>
     jQuery.noConflict()
  $(function() {
    $('#slider-range').slider({
      range: true,
      min: 25,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        jQuery( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    jQuery( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
  });
  </script>
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,900,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="../CSS/questions.css">
</head>

This is the html of the widget:

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount"  >
</p>

<div id="slider-range"></div>

And this is the CSS:

#slider-range{
  border:0;
  color:#f6931f; 
  font-weight:bold;
}

Thanks!

Solution

  • Your problem stems from declaring jQuery.noConflict()

    By doing so you are no longer able to directly access jQuery using $

    If you need noConflict you can fix your code by changing:

    jQuery.noConflict()
$(function() {

    To

    jQuery.noConflict()
jQuery(function($) {/* "$" argument allows using "$" inside the ready handler*/

    Working demo of your code

    Learn how to use browser console to check for errors. You should be seeing errors for "$" is not defined or similar depending on browser