Slider: Does not work on its own (custom build with only slider) #7383

Closed
gabrielschulhof opened this Issue May 8, 2014 · 7 comments

3 participants

@gabrielschulhof gabrielschulhof referenced this issue in jquery/jquerymobile.com May 8, 2014
Closed

Builder for just slider doesn't work #68

@gabrielschulhof

The resolution seems to be the same as #7294 - slider needs to depend on vmouse.

@SamHasler

Will vmouse also fix the input not being degraded to a text input or is there something else that does that?

Edit: I see that "Degrade Inputs" is selected after selecting slider, so I guess that's what should be doing it but either the code isn't included, or not run.

@gabrielschulhof

The workaround is to add vmouse to your build and then use the following script and markup:

<script>
$( function() {
  $( "#the-slider" ).slider().textinput();
});
</script>
<form>
  <input type="number" data-type="range" min="0" max="100" val="17" step="1" name="the-slider" id="the-slider">
</form>

As you can see, you're instantiating both a slider and a textinput widget on the input, which is itself not of type range, but directly of type number, which is the effect degradeInputs would have anyway, if you were to include it in the build. You don't need to explicitly include textinput in the build, because slider depends on textinput. It should also depend on vmouse, and we'll fix that ASAP.

@gabrielschulhof gabrielschulhof added a commit that referenced this issue May 8, 2014
@gabrielschulhof gabrielschulhof Slider: Depend on vmouse
Fixes gh-7383
6ce8dd8
@gabrielschulhof gabrielschulhof added this to the 1.4.3 milestone May 8, 2014
@gabrielschulhof gabrielschulhof self-assigned this May 8, 2014
@gabrielschulhof

To be clear: The workaround consists solely of having to add vmouse to your build for now. The scripting and markup are not part of the workaround. That's how you make a slider when you've chosen to restrict your build to the slider.

@gabrielschulhof

@SamHasler if, however, you wish to start out with a range input, then you must also add degradeInputs to the build and call $.mobile.degradeInputsWithin( rangeContainer ) on the container containing the range input. Be aware, however, that degrading an input like that involves removing the original input from the DOM, and inserting in its place an input of type number with all the same properties as the original input. This is done because you cannot modify the type of an input after it's been added to the DOM.

@SamHasler

@gabrielschulhof Thanks for the detailed explanation. I think it would be worth adding a page to the documentation with that in it and linking to it from the download-builder.

@jaspermdegroot
jQuery Foundation member

PR for this issue is #7274 instead of #7384

@arschmitz arschmitz added a commit that closed this issue Jun 2, 2014
@jugglinmike jugglinmike Slider and Rangeslider: Express module dependency
Both modules have a hard dependency on the "vmouse" module that should
be expressed in AMD.

Re gh-5987
Closes gh-7383
Closes gh-7274
44e2d98
@arschmitz arschmitz closed this in 44e2d98 Jun 2, 2014
@arschmitz arschmitz added a commit that referenced this issue Jun 3, 2014
@jugglinmike jugglinmike Slider and Rangeslider: Express module dependency
Both modules have a hard dependency on the "vmouse" module that should
be expressed in AMD.

Re gh-5987
Closes gh-7383
Closes gh-7274

(cherry picked from commit 44e2d98)
56dddc6
@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@jugglinmike jugglinmike Slider and Rangeslider: Express module dependency
Both modules have a hard dependency on the "vmouse" module that should
be expressed in AMD.

Re gh-5987
Closes gh-7383
Closes gh-7274
71b44df
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment