nascosta la casella di immissione del cursore in jquery

Question

Sto usando jquery Mobile 1.0.

Ho questo codice html.

<label for="slider" class="ui-hidden-accessible"> 
    Input slider: 
</label> 
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" /> 

La sua resa in questo modo:

ma voglio togliere il rosso segnato parte. Voglio mostrare solo la parte del cursore.

Come si può fare?

Answer 1

Se si vuole solo sbarazzarsi delle frecce su/giù, si può avvolgere l'ingresso in un elemento con una larghezza/altezza e overflow : hidden specificato:

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

O come ha affermato Frederic Hamidi, è possibile nascondere l'elemento tutti insieme e solo un dispositivo di scorrimento sarà visibile.

Ecco una demo del codice di cui sopra: http://jsfiddle.net/EWQ6n/1/

Inoltre è possibile nascondere l'elemento di input con i CSS (che è bello perché non si ha il tempo per l'esecuzione del CSS come si fa con JS) :

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

Ecco una demo usando i CSS: http://jsfiddle.net/EWQ6n/2/

Aggiornamento

Invece di utilizzare la parola chiave !important, è anche possibile creare una regola CSS più specifica in modo che venga utilizzata sulle classi jQuery Mobile. Un esempio potrebbe essere:

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

Answer 2

Si potrebbe nascondere il controllo di input manualmente:

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

Answer 3

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

Answer 4

Se si desidera solo per sbarazzarsi della freccia su/giù utilizzare type="text" data-type="range"

<input type="text" data-type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" /> 

Answer 5

Quando si esegue utilizzando CSS approccio, è possibile interrompere l'ingresso deposito di altro. Quindi aggiungendo la classe class="ui-hidden-accessible" all'input per nasconderlo.

Rimuovi questo class="ui-hidden-accessible" da label.

L'approccio è corretto. Ma è necessario aggiungere class="ui-hidden-accessible" a input non su label.

Il codice dovrebbe essere simile a questo:

<label for="slider">Input slider:</label> 
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" 
    value="25" min="0" max="100" class="ui-hidden-accessible"/> 

Scegli questa SAMPLE DEMO

Answer 6

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

ma guarda che añoy compensato

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

Answer 7

ho voluto fare anche questo, ma io volevo anche che lo spazio andasse via. Ho compiuto questo in questo modo (sto usando un dispositivo di scorrimento intervallo):

<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> 

Avviso ho aggiunto il .no-numero al div.

Poi nel 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 
} 

sto facendo tutto questo come parte di un problema più grande, che è quello che sto cercando di utilizzare un dispositivo di scorrimento intervallo per volta invece di numeri, quindi ho sostituito quelli elementi con un'intestazione posso cambiare con una funzione per visualizzare l'ora.

Questa potrebbe non essere la scelta perfetta, ma non ho visto dove recuperare lo spazio da nessuna parte, quindi ho pensato di postarlo qui.

Answer 8

si possono rimuovere Input Slider come qui sotto:

input.ui-slider-input { 
     display: none; 
     width: 0; 
    } 


    .ui-slider-track { 
     margin: 0 15px 0 15px !important; 
    }