Cómo cambiar el control deslizante de UI de Jquery

Quiero modificar el control deslizante JQuery UI de stock para que el mango tenga una flecha en lugar de un cuadrado. es decir, quiero usar una imagen personalizada como el mango.Cómo cambiar el control deslizante de UI de Jquery

Hay algunos tutoriales que lo hacen:

Pero no puedo conseguir que funcione. El código siguiente produce una imagen de mango estacionario en:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider({handle: '#myhandle'}); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"><div id="myhandle"></div></div> 
</body> 
</html>

es como si jQuery no recoge que yo quiero usar el myhandle id para el mango. Me pregunto: ¿Necesito un complemento para que JQuery reconozca la opción manejar? (no está documentado en http://docs.jquery.com/UI/Slider). ¿O tal vez solo funcionó en una versión anterior de JQuery?

¿Alguna idea?

Fuente

2009-07-30 Tom

Esto ha sido respondido antes: http://stackoverflow.com/questions/1170596/changing-slider-handle-image – karim79

Los tres enlaces del tutorial en la pregunta ahora están muertos. :( –

La clase de CSS que se puede cambiar para agregar una imagen al control deslizante de JQuery se llama ".ui-slider-horizontal .ui-slider-handle".

El siguiente código muestra un demo:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider(); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"></div> 
</body> 
</html>

Creo que el registro de una opción de mango estaba la vieja manera de hacerlo y ya no se admite en jQuery-UI 1.7.2?

Fuente

2009-07-30 16:05:12 Tom

wow ... yo también estaba enfrentando el mismo problema y eso se resolvió con tu solución ... gracias amigo –

Copié y pegué este código exacto en DW y lo probé. Reemplacé la imagen con la mía. No el control deslizante ni el visualización de la imagen en absoluto. He intentado todas las soluciones enumeradas en relación con este tema y nada ha funcionado para cambiar las imágenes.Voy a publicar mi código en mi propio hilo y si hay una solución que funcione en SO, con suerte alguien puede listar la URL en SO. – Chris22

El enlace al png está roto. –

También debe establecer border:none en esa clase css.

Fuente

2010-06-08 02:36:28

.ui-slider .ui-slider-handle{ 
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute; 
    top: -10px; 
    border-style:none; 
}

Fuente

2010-08-04 02:07:40

Si necesita reemplazar el mango con algo completamente distinto, en lugar de sólo restyling que:

You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization.

Working Example

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>'); 
 

 
$('.slider').slider({ 
 
    range: "min", 
 
    value: 10 
 
});

.slider .ui-state-default { 
 
    background: none; 
 
} 
 
.slider.ui-slider .ui-slider-handle { 
 
    width: 14px; 
 
    height: 18px; 
 
    margin-left: -5px; 
 
    top: -4px; 
 
    border: none; 
 
    background: none; 
 
} 
 
.slider { 
 
    height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<div class="slider"></div>

Fuente

2014-02-11 18:31:15 apaul

Esta debería ser la respuesta de aceptación para la minuciosidad y el ejemplo de trabajo. ¿Por qué diseñar un elemento preexistente con usted puede simplemente inyectar el suyo? –

Esto cambia solo el primer tirador en el control deslizante multihandle. En apiDoc puede ver: "Por ejemplo, si especifica valores: [1, 5, 18] y crea un identificador personalizado, el complemento creará los otros dos".

Fuente

2016-02-09 08:30:31 anatoli

Por favor, agregue algunos comentarios sobre su solución sobre por qué y cómo resuelve el problema –

Cómo cambiar el control deslizante de UI de Jquery

Respuesta

Cuestiones relacionadas