masquer la zone de saisie du curseur dans jquery

Si vous voulez juste pour se débarrasser des flèches haut/bas, vous pouvez placer l'entrée d'un élément spécifié largeur/hauteur et overflow : hidden:

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '36px',
    width    : '45px',
    overflow : 'hidden'
}));

Ou Frédéric Hamidi a déclaré, vous pouvez masquer l'élément, tous ensemble, et seulement un curseur sera visible.

Voici une démo du code ci-dessus: http://jsfiddle.net/EWQ6n/1/

Vous pouvez également masquer l'élément d'entrée avec CSS (ce qui est agréable parce que vous n'avez pas à le moment de l'exécution de la CSS comme vous le faites avec JS):

.ui-slider-input {
    display : none !important;
}

Voici une démo à l'aide de CSS: http://jsfiddle.net/EWQ6n/2/

Mise à jour

Au lieu d'utiliser le !important mot-clé, vous pouvez également faire une plus spécifique de la règle CSS de sorte qu'il est utilisé sur le jQuery Mobile classes. Un exemple serait:

.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
    display : none;
}

Vous pouvez masquer le contrôle de saisie manuellement:

$("#yourPage").live("pageinit", function() {
    $(".ui-slider-input").hide();
});

Je voulais le faire aussi, mais je voulais aussi l'espace pour aller loin. Je l'ai accompli de cette façon (je suis à l'aide d'un curseur de plage):

<div data-role="rangeslider" data-mini="true" class="no-number">
    <input type="range" name="Morn"  id="Morn"  data-mini="true" value="720" min="0" max="1439">
    <input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439">
</div>

Avis, j'ai ajouté l' .pas de numéro à la div.

Ensuite dans le css:

/* Used to remove the number next to the slider.*/
.no-number .ui-slider-input
{
    display : none;
    width: 0px;
}

/* Used to remove the space where the number was. */
.no-number .ui-rangeslider-sliders
{
    margin: 0 5px; !important
}

Je suis en train de faire tout cela dans le cadre d'un gros problème, qui est que je suis en train d'utiliser un curseur de plage de temps au lieu de numéros, j'ai donc remplacé ces éléments avec un en-tête, je peux la changer avec une fonction d'affichage de l'heure.

Cela peut ne pas être le choix parfait, mais je ne vois pas où pour obtenir le retour de l'espace partout, donc j'ai pensé que je pourrais le poster ici.

<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible"  />

mais regardez qui anoy décalage

.ui-slider-track {
    margin: 0 15px 0 68px;  ----> change to 10
}