ukrywanie pola wprowadzania suwaka w jquery

Question

Używam jquery Mobile 1.0.

Mam ten kod 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" /> 

Jego rendering tak:

Ale chcę, aby usunąć czerwono zaznaczono części. Chcę pokazać tylko część suwaka.

Jak można tego dokonać?

Answer 1

Jeśli chcesz po prostu pozbyć się strzałek góra/dół, można zawinąć wejście w elemencie z określoną szerokość/wysokość overflow : hidden:

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

Lub, jak stwierdził Frederic Hamidi, można po prostu ukryć element razem i tylko suwak będzie widoczny.

Oto demo powyższego kodu: http://jsfiddle.net/EWQ6n/1/

Ponadto można ukryć element wejściowy za pomocą CSS (co jest dobre, bo nie masz do czasu wykonania CSS jak ty z JS) :

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

Oto demo za pomocą CSS: http://jsfiddle.net/EWQ6n/2/

Aktualizacja

Zamiast używać słowa kluczowego !important, można również utworzyć bardziej szczegółową regułę CSS, aby była używana przez klasy jQuery Mobile. Przykładem może być:

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

Answer 2

Można ukryć kontroli wprowadzane ręcznie:

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

Answer 3

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

Answer 4

Jeśli chcesz tylko pozbyć się góra/dół strzałki używać 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

Kiedy robisz to za pomocą CSS podejście, można złamać wejście złożony z innych. Dodając więc klasę class="ui-hidden-accessible" do danych wejściowych, aby ją ukryć.

Usuń tę class="ui-hidden-accessible" z label.

Twoje podejście jest prawidłowe. Ale musisz dodać class="ui-hidden-accessible" do input nie na label.

Twój kod powinien wyglądać następująco:

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

Sprawdź to 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" /> 

ale wygląda że anoy przesunięcie

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

Answer 7

Chciałem to zrobić też, ale ja chciał również, aby przestrzeń się rozniosła. Osiągnąłem to w ten sposób (używam suwaka zasięgu):

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

Uwaga Dodałem numer .no do elementu div.

Następnie w 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 
} 

Robię to wszystko jako część większego problemu, który jest, że próbuję użyć suwaka zakres dla czasu zamiast liczb, więc wymieniłem te elementy z nagłówkiem mogę zmienić za pomocą funkcji wyświetlania czasu.

To może nie być idealny wybór, ale nie widziałem, skąd można uzyskać miejsce z powrotem, więc pomyślałem, że opublikuję go tutaj.

Answer 8

można usunąć wskaźnika wejścia jak poniżej:

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


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