Compartir a través de

Controles deslizantes

  • Artículo

Un control deslizante es un control que permite al usuario seleccionar a partir de un intervalo de valores moviendo un control deslizante a lo largo de una pista.

Un control deslizante

¿Es este el control adecuado?

Use un control deslizante cuando desee que los usuarios puedan establecer valores definidos y contiguos (como el volumen o el brillo) o un intervalo de valores discretos (como la configuración de resolución de pantalla).

Un control deslizante es una buena opción cuando se sabe que los usuarios piensan en el valor como una cantidad relativa, no como un valor numérico. Por ejemplo, los usuarios piensan en establecer el volumen de audio en bajo o medio, no en establecer el valor en 2 o 5.

No use un control deslizante para la configuración binaria. Use un conmutador de alternancia en su lugar.

Estos son algunos factores adicionales que se deben tener en cuenta al decidir si usar un control deslizante:

  • ¿El valor de configuración parece una cantidad relativa? Si no es así, use botones de radio o un cuadro de lista.
  • ¿El valor de configuración es un valor numérico exacto y conocido? Si es así, use un cuadro de texto numérico.
  • ¿Sería bueno que el usuario obtuviera una respuesta inmediata sobre el efecto de los cambios realizados en la configuración? Si es así, use un control deslizante. Por ejemplo, los usuarios pueden elegir un color más fácilmente viendo inmediatamente el efecto de los cambios en los valores de tono, saturación o luminosidad.
  • ¿La configuración tiene un intervalo de cuatro o más valores? Si no es así, use botones de radio.
  • ¿El usuario puede cambiar el valor? Los controles deslizantes son para la interacción del usuario. Si un usuario no puede cambiar nunca el valor, use texto de solo lectura en su lugar.

Si está decidiendo entre un control deslizante y un cuadro de texto numérico, use un cuadro de texto numérico si:

  • El espacio de la pantalla es reducido.
  • Es probable que el usuario prefiera usar el teclado.

Use un control deslizante si:

  • Los usuarios se beneficiarán de comentarios instantáneos.

Recomendaciones

  • Ajustar el tamaño del control para que los usuarios puedan establecer fácilmente el valor que desean. Para la configuración con valores discretos, asegúrese de que el usuario puede seleccionar fácilmente cualquier valor con el mouse. Asegúrese de que los puntos de conexión del control deslizante siempre encajen dentro de los límites de una vista.
  • Proporcione comentarios inmediatos mientras o después de que un usuario realice una selección (cuando sea práctico). Por ejemplo, el control de volumen de Windows emite un pitido para indicar el volumen de audio seleccionado.
  • Use etiquetas para mostrar el intervalo de valores. Excepción: Si el control deslizante está orientado verticalmente y la etiqueta superior es Máximo, Alto, Más o equivalente, puede omitir las demás etiquetas porque el significado queda claro.
  • Deshabilite todas las etiquetas asociadas o los comentarios visuales cuando deshabilite el control deslizante.
  • Tenga en cuenta la dirección del texto al establecer la dirección del flujo o la orientación del control deslizante. La escritura fluye de izquierda a derecha en algunos idiomas y de derecha a izquierda en otros.
  • No use un control deslizante como indicador de progreso.
  • No cambie el tamaño del control deslizante del tamaño predeterminado.
  • No cree un control deslizante continuo si el intervalo de valores es grande y lo más probable es que los usuarios seleccionen uno de varios valores representativos del intervalo. En su lugar, use esos valores como los únicos pasos permitidos. Por ejemplo, si el valor de tiempo puede ser de hasta 1 mes, pero los usuarios solo necesitan elegir entre 1 minuto, 1 hora, 1 día o 1 mes, cree un control deslizante con solo 4 puntos de paso.

Orientaciones de uso adicionales

Elección del diseño correcto: horizontal o vertical

Puede orientar el control deslizante horizontal o verticalmente. Siga estas instrucciones para determinar qué diseño usar.

  • Utilice una orientación natural. Por ejemplo, si el control deslizante representa un valor real que normalmente se muestra verticalmente (como la temperatura), use una orientación vertical.
  • Si el control se usa para buscar contenido multimedia, como en una aplicación de vídeo, use una orientación horizontal.
  • Cuando se usa un control deslizante en la página que se puede desplazar en una dirección (horizontal o verticalmente), use una orientación diferente para el control deslizante que la dirección de desplazamiento panorámico. De lo contrario, los usuarios pueden deslizar el control deslizante y cambiar su valor de forma accidental cuando intenten desplazarse por la página.
  • Si sigue sin estar seguro de qué orientación usar, utilice la que mejor se adapte a su diseño de página.

Dirección del intervalo

La dirección del intervalo es la dirección en la que se mueve el control deslizante al deslizarlo de su valor actual a su valor máximo.

  • Para el control deslizante vertical, coloque el valor mayor en la parte superior del control deslizante, independientemente de la dirección de lectura. Por ejemplo, para un control deslizante de volumen, coloque siempre la configuración de volumen máxima en la parte superior del control deslizante. Para otros tipos de valores (como los días de la semana), siga la dirección de lectura de la página.
  • En el caso de los estilos horizontales, coloque el valor inferior en el lado izquierdo del control deslizante para el diseño de página de izquierda a derecha y a la derecha para el diseño de página de derecha a izquierda.
  • La única excepción a la directriz anterior es para las barras de búsqueda multimedia: coloque siempre el valor inferior en el lado izquierdo del control deslizante.

Pasos y marcas de graduación

  • Use puntos de paso si no desea que el control deslizante permita valores arbitrarios entre mínimo y máximo. Por ejemplo, si usa un control deslizante para especificar el número de entradas de película que se van a comprar, no permita valores de punto flotante. Asígnele un valor de paso de 1.
  • Si especifica los pasos (también conocidos como puntos de acoplamiento), asegúrese de que el paso final se alinea con el valor máximo del control deslizante.
  • Use marcas de graduación cuando desee mostrar a los usuarios la ubicación de los valores principales o significativos. Por ejemplo, un control deslizante que controla un zoom podría tener marcas de graduación para el 50 %, el 100 % y el 200 %.
  • Muestre las marcas de graduación cuando los usuarios necesiten conocer el valor aproximado de la configuración.
  • Muestre las marcas de graduación y una etiqueta de valor cuando los usuarios necesiten conocer el valor exacto de la configuración que elijan, sin interactuar con el control. De lo contrario, pueden usar la información sobre herramientas de valor para ver el valor exacto.
  • Muestre siempre marcas de graduación cuando los puntos de paso no sean obvios. Por ejemplo, si el control deslizante tiene 200 píxeles de ancho y tiene 200 puntos de acoplamiento, puede ocultar las marcas de graduación porque los usuarios no observarán el comportamiento de ajuste. Pero si solo hay 10 puntos de ajuste, deben mostrar las marcas de graduación.

Etiquetas

  • Etiquetas de control deslizante

    La etiqueta del control deslizante indica para qué se usa ese control.

    • Use una etiqueta sin puntuación final (esta es la convención para todas las etiquetas de control).
    • Coloque las etiquetas encima del control deslizante cuando el control deslizante esté en una forma que ubique la mayoría de las etiquetas sobre sus controles.
    • Coloque las etiquetas en los lados cuando el control deslizante esté en una forma que ubique la mayoría de las etiquetas al lado de sus controles.
    • Evite colocar etiquetas debajo del control deslizante porque el dedo del usuario podría tapar la etiqueta cuando toque el control deslizante.

  • Etiquetas de intervalo

    El intervalo, o relleno, de las etiquetas describe los valores mínimo y máximo del control deslizante.

    • Etiquete los dos extremos del intervalo deslizante, a menos que una orientación vertical lo haga innecesario.
    • Si es posible, use solo una palabra para cada etiqueta.
    • No utilice la puntuación final.
    • Asegúrese de que estas etiquetas son descriptivas y paralelas. Ejemplos: Máximo/Mínimo, Más/Menos, Bajo/Alto, Suave/Fuerte.

  • Etiquetas de valor

    Una etiqueta de valor muestra el valor actual del control deslizante.

    • Si necesita una etiqueta de valor, muéstrela debajo del control deslizante.
    • Centre el texto con respecto al control e incluya las unidades (como píxeles).
    • Como el control de posición del control deslizante queda oculto al deslizarlo, considera la posibilidad de mostrar el valor actual de alguna otra forma, con una etiqueta u otro objeto visual. Un control deslizante que configure el tamaño del texto podría mostrar un texto de muestra del tamaño correcto junto al control deslizante.

Apariencia e interacción

Un control deslizante se compone de una pista y un control. La pista es una barra (que opcionalmente puede mostrar varios estilos de marcas de graduación) que representan el intervalo de valores que pueden ser de entrada. El control es un selector, que el usuario puede colocar pulsando la pista o arrastrando hacia atrás y hacia delante.

Un control deslizante tiene un gran objetivo táctil. Para mantener la accesibilidad táctil, un control deslizante debe colocarse lo suficientemente lejos del borde de la pantalla.

Al diseñar un control deslizante personalizado, piensa en la manera de presentar toda la información necesaria al usuario de la forma más clara posible. Use una etiqueta de valor si un usuario necesita conocer las unidades y así comprender la configuración; busque formas creativas para representar estos valores gráficamente. Por ejemplo, un control deslizante que controla el volumen, podría mostrar un gráfico del altavoz sin ondas de sonido en el extremo mínimo del control deslizante y un gráfico del altavoz con ondas de sonido en el extremo máximo.

Ejemplos

Control deslizante con marcas de graduación en intervalos de 10 puntos de 0 a 100.

Un control deslizante horizontal con marcas de paso

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Existen API para este control en el espacio de nombres Windows.UI.Xaml.Controls.

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos, las plantillas y las características más actuales de todos los controles. WinUI 2.2 o de versiones posteriores incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Crear un control deslizante

Abra la aplicación WinUI 3 Gallery y vea Slider en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Aquí se muestra cómo crear un control deslizante en XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Aquí se muestra cómo crear un control deslizante en código.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Obtienes y configuras el valor del control deslizante de la propiedad Value. Para responder a los cambios de valor, puedes usar el enlace de datos para enlazar la propiedad Value o controlar el evento ValueChanged.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

Obtener el código de ejemplo