ocultando el cuadro de entrada del control deslizante en jquery

Question

Estoy usando jquery Mobile 1.0.

Tengo este código 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" /> 

Su representación de la siguiente manera:

Pero quiero quitar el rojo marcado parte. Quiero mostrar solo la parte deslizante.

¿Cómo se puede hacer esto?

Answer 1

Si lo que desea es deshacerse de las flechas arriba/abajo, se puede envolver la entrada de un elemento con una anchura/altura y overflow : hidden se especifica:

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

O como afirma Frederic Hamidi, sólo puede ocultar el elemento todos juntos y sólo un control deslizante será visible.

Aquí es una demostración de que el código anterior: http://jsfiddle.net/EWQ6n/1/

También puede ocultar el elemento de entrada con CSS (lo cual es bueno, ya que no tiene en cuando la ejecución de la CSS como se hace con JS) :

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

Aquí es una demostración usando CSS: http://jsfiddle.net/EWQ6n/2/

actualización

En lugar de utilizar la palabra clave !important, también puede crear una regla CSS más específica para que se use en las clases jQuery Mobile. Un ejemplo sería:

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

Answer 2

Se podría ocultar el control de entrada de forma manual:

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

Answer 3

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

Answer 4

Si sólo quieren deshacerse de la flecha arriba/abajo utilizar 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

Cuando lo haces usando CSS enfoque, es posible romper la entrada archivado de otro. Entonces, agregue la clase class="ui-hidden-accessible" a la entrada para ocultarla.

Eliminar este class="ui-hidden-accessible" de label.

Su enfoque es el correcto. Pero debe agregar class="ui-hidden-accessible" al input, no en el label.

El código debería ser así:

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

Marque esta 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" /> 

pero mira que Anoy compensado

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

Answer 7

que quería hacer esto también, pero yo también quería que el espacio se fuera. Lo logré esta manera (estoy usando un control deslizante de rango):

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

Aviso he añadido el número .no a la div.

Luego, en 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 
} 

que estoy haciendo todo esto como parte de un problema más grande, que es que estoy tratando de usar un control deslizante rango de tiempo en lugar de los números, por lo que sustituye los los elementos con un encabezado puedo cambiar con una función para mostrar la hora.

Puede que esta no sea la elección perfecta, pero no vi dónde recuperar el espacio, así que pensé en publicarlo aquí.

Answer 8

Puede eliminar de entrada deslizante como a continuación:

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


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