Implementación de Sliders y Toggles en SwiftUI

Clase 12 de 23 • Curso de Desarrollo de Aplicaciones con SwiftUI

Resumen

Aprender a utilizar elementos interactivos en SwiftUI como sliders y toggles te permite obtener información del usuario de forma dinámica y eficiente. En esta guía, vas a entender cómo incorporar un slider para datos en un rango específico y un toggle para respuestas tipo boolean (verdadero o falso), facilitando así una experiencia más intuitiva en tus aplicaciones.

¿Qué es un slider en SwiftUI y cómo se implementa?

Un slider en SwiftUI es una herramienta que permite elegir rápidamente un valor dentro de un rango específico. En Xcode, al implementar un slider, recuerda:

Crear un state usando la propiedad @State.
Elegir un valor inicial, por ejemplo, una edad de 18 con tipo Double.
Especificar el rango mínimo y máximo claramente (por ejemplo, de 1 a 100).

Tu código inicial podría verse así:

@State private var age: Double = 18

Slider(value: $age, in: 1...100)

¿Por qué usar tipo de dato Double para edades?

Aunque una edad podría considerarse número entero, el slider requiere usar Double debido a la continuidad en los valores seleccionados. Para solucionar esto y obtener números enteros hay dos estrategias:

Utilizar el modificador step, estableciendo incrementos fijos:

Slider(value: $age, in: 1...100, step: 1)

Formatear el valor visualmente para eliminar decimales:

Text("\(age.formatted(.number))")

¿Cómo implementar y conectar un toggle en SwiftUI?

El toggle ofrece interacción mediante valores booleanos, activado o desactivado. Los pasos básicos para agregar un toggle son:

Crear un state booleano, por ejemplo @State private var isAdult: Bool = false
Usar Toggle con etiqueta y vincularlo con el state:

Toggle("Mayor de edad", isOn: $isAdult)

¿Cómo relacionar el slider con el toggle usando lógica condicional?

Puedes utilizar un evento llamado onChange para monitorear cambios en el slider y activar el toggle según sea el caso:

Slider(value: $age, in: 1...100, step: 1)
    .onChange(of: age) { newAge in
        if newAge >= 18 {
            isAdult = true
        } else {
            isAdult = false
        }
    }

De este modo, cuando muevas el slider y llegues o superes el valor 18, el toggle cambiará automáticamente su estado.

¿Cómo afrontar el reto inverso?

Ahora, como práctica avanzada, intenta lo contrario:

Que el slider se adapte cuando cambies el toggle.
Al activar el toggle "mayor de edad", el slider debería ajustarse automáticamente a 18.
Al desactivarlo, debería ajustarse a un número menor, como 17.

Cuando completes este reto, comparte tu solución y consulta cualquier duda en los comentarios.

Paul Flores

student•

Les dejo mi solución refactorizada del reto

//
//  TogglePractice.swift
//  Notes
//
//  Created by Paul Flores on 25/02/25.
//

import SwiftUI

struct TogglePractice: View {
    @State private var age: Double = 0
    @State private var isAdult: Bool = false

    var body: some View {
        VStack {
            Text("Age: \(age.formatted(.number))")
            Slider(value: $age, in: 1...80, step: 1)
            Toggle("Is an adult?", isOn: $isAdult)
        }
        .padding()
        .onChange(of: age) { newValue in
            isAdult = newValue >= 18
        }
        .onChange(of: isAdult) { newValue in
            age = newValue ? 18 : 15
        }
    }
}

#Preview {
    TogglePractice()
}

Laura Belen Yachelini

student•

Buenas!

Comparto el codigo de la solución al challenge :)struct TogglePractice: View {

struct TogglePractice: View {
  @State var age: Double = 0
  @State var isAdult: Bool = false
    var body: some View {
       
        VStack{
          Toggle("Is adult?", isOn: $isAdult)
          Slider(value: $age, in:0...18, step: 1)
            .onChange(of: isAdult) { newValue in
              if newValue {
                age = 18
              }else{
                age = 17
              }
            }
        }.padding()
        }
}

@State var age: Double = 0

@State var isAdult: Bool = false

var body: some View {

VStack {

// Text("Age: \(age.formatted(.number))")

// Slider(value: $age, in:1...100, step: 1)

// Toggle("Is adult?", isOn: $isAdult)

// }.padding()

// .onChange(of: age) { newValue in

// if newValue >= 18 {

// isAdult = true

// }else{

// isAdult = false

// }

VStack{

Toggle("Is adult?", isOn: $isAdult)

Slider(value: $age, in:0...18, step: 1)

.onChange(of: isAdult) { newValue in

if newValue {

age = 18

}else{

age = 17

}

}.padding()

}

Laura Belen Yachelini

student•

Buenas! Comparto mi solución al challenge

struct TogglePractice: View {
  @State var age: Double = 0
  @State var isAdult: Bool = false
    var body: some View {
        VStack{
          Toggle("Is adult?", isOn: $isAdult)
          Slider(value: $age, in:0...18, step: 1)
            .onChange(of: isAdult) { newValue in
              if newValue {
                age = 18
              }else{
                age = 17
              }
            }
        }.padding()
    }
}

Sergio Baudilio Pinilla Martinez

student•

struct TogglePracticeView: View {
    
    @State var age: Double = 18
    @State var isAdult: Bool = false
    
    var body: some View {
        
        VStack {
            Text ("Age: \(age.formatted(.number))")
            Slider(value: $age, in: 0...100,step: 1)
                .padding(.horizontal, 20)
            
            Toggle("Es adult ?", isOn: $isAdult)
                .padding(.horizontal, 20)
                .padding(.vertical, 20)
            
        }.onChange(of:age) { oldValue, newValue in
            
            if newValue >= 18 {
                isAdult = true
            }else {
                isAdult = false
            }
            
        }.onChange(of:isAdult) { oldValue, newValue in
            if isAdult {
                age = 20
            }else {
                age = 10
            }
        }
    }
}

David Moreno

student•

VStack{

Text("Edad: \(edad.formatted(.number))")

Slider(value: $edad, in: 0...100, step: 1)

Toggle("EsAdulto?", isOn: $esAdulto)

}

.padding()

.onChange(of: esAdulto) { newValueBool in

if newValueBool{

//Setear 18

edad = 18

}else{

//Setear 15

edad = 15

}

Jesús Alfredo Morales Torres

student•

Juan Jose Rodriguez De Gouveia

student•

En swift también existe las condiciones ternarias que retorna un valor dependiendo del resultado de la condición, y esta ternarias como su nombre lo indica esta compuesto por 3 elementos principales que son: validación, el valor que devolveremos cuando sea true y el valor que devolveremos cuando sea false

variable = validación ? valor cuando es true : valor cuando es false

En resumen, así quedaría el onChange resolviendo el reto del profesor:

.onChange(of: isAdunt) { _, newValue in
    age = newValue ? 18 : 17
}

Fernando Molano Castrillón

student•

Podemos simplificar tanto if/else con ternary operators

Mario Moreno

student•

Un casting también funciona:

Text("Age: \(Int(age))")

Bryan Alexander Guapacha Florez

student•

Hola, comparto el codigo de mi solucion de reto:

struct TogglePractice: View {
    @State var age2: Double = 18
    @State var isAdult2: Bool = false
    
    var body: some View {
        
        VStack {
            Text("Eres mayor de edad?")
            Toggle("Is adult?", isOn: $isAdult2)
            Text("Age: \(age2.formatted(.number))")
            Slider(value: $age2, in: 1...100, step: 1)
                
        }
        .padding()
        .onChange(of: isAdult2) { newValue in
            if newValue == true{
                age2 = 18
            } else {
                age2 = 15
            }
        }
        
    }
}
```**struct** TogglePractice: View {

@State **var** age2: Double = 18

@State **var** isAdult2: Bool = **false**



**var** body: **some** View {



VStack {

Text("Eres mayor de edad?")

Toggle("Is adult?", isOn: $isAdult2)

Text("Age: \\(age2.formatted(.number))")

Slider(value: $age2, in: 1...100, step: 1)



}

.padding()

.onChange(of: isAdult2) { newValue **in**

**if** newValue == **true**{

age2 = 18

} **else** {

age2 = 15

}

}



}

}

Margarita Rosa Xiques Machado

student•

Hola, les comparto mi código:

struct TogglePractice: View {
    
    @State var age: Double = 18
    @State var isAdult: Bool = false
    
    var body: some View {
        VStack {
            Text("Age: \(age.formatted(.number))")
            Slider(value: $age, in: 1...100, step: 1)
            Toggle("Is Adult?", isOn: $isAdult)
        }.padding()
            .onChange(of: isAdult) {
                if isAdult {
                    age = Double(Int.random(in: 18...100))
                } else {
                    age = Double(Int.random(in: 1...17))
                }
            }
            .onChange(of: age) {
                if age >= 18 {
                    isAdult = true
                } else {
                    isAdult = false
                }
            }
    }
}
```**struct** TogglePractice: View {



@State **var** age: Double = 18

@State **var** isAdult: Bool = **false**



**var** body: **some** View {

VStack {

Text("Age: \\(age.formatted(.number))")

Slider(value: $age, in: 1...100, step: 1)

Toggle("Is Adult?", isOn: $isAdult)

}.padding()

.onChange(of: isAdult) {

**if** isAdult {

age = Double(Int.random(in: 18...100))

} **else** {

age = Double(Int.random(in: 1...17))

}

}

.onChange(of: age) {

**if** age >= 18 {

isAdult = **true**

} **else** {

isAdult = **false**

}

}

}

}

Jorge Ivan Duarte Marin

student•

Tambien se puede utilizar de esta manera

age.formatted()

//
//  TogglePractice.swift
//  Notes
//
//  Created by Paul Flores on 25/02/25.
//

import SwiftUI

struct TogglePractice: View {
    @State private var age: Double = 0
    @State private var isAdult: Bool = false

    var body: some View {
        VStack {
            Text("Age: \(age.formatted(.number))")
            Slider(value: $age, in: 1...80, step: 1)
            Toggle("Is an adult?", isOn: $isAdult)
        }
        .padding()
        .onChange(of: age) { newValue in
            isAdult = newValue >= 18
        }
        .onChange(of: isAdult) { newValue in
            age = newValue ? 18 : 15
        }
    }
}

#Preview {
    TogglePractice()
}

struct TogglePractice: View {
  @State var age: Double = 0
  @State var isAdult: Bool = false
    var body: some View {
       
        VStack{
          Toggle("Is adult?", isOn: $isAdult)
          Slider(value: $age, in:0...18, step: 1)
            .onChange(of: isAdult) { newValue in
              if newValue {
                age = 18
              }else{
                age = 17
              }
            }
        }.padding()
        }
}

struct TogglePractice: View {
  @State var age: Double = 0
  @State var isAdult: Bool = false
    var body: some View {
        VStack{
          Toggle("Is adult?", isOn: $isAdult)
          Slider(value: $age, in:0...18, step: 1)
            .onChange(of: isAdult) { newValue in
              if newValue {
                age = 18
              }else{
                age = 17
              }
            }
        }.padding()
    }
}

struct TogglePracticeView: View {
    
    @State var age: Double = 18
    @State var isAdult: Bool = false
    
    var body: some View {
        
        VStack {
            Text ("Age: \(age.formatted(.number))")
            Slider(value: $age, in: 0...100,step: 1)
                .padding(.horizontal, 20)
            
            Toggle("Es adult ?", isOn: $isAdult)
                .padding(.horizontal, 20)
                .padding(.vertical, 20)
            
        }.onChange(of:age) { oldValue, newValue in
            
            if newValue >= 18 {
                isAdult = true
            }else {
                isAdult = false
            }
            
        }.onChange(of:isAdult) { oldValue, newValue in
            if isAdult {
                age = 20
            }else {
                age = 10
            }
        }
    }
}

struct TogglePractice: View {
    @State var age2: Double = 18
    @State var isAdult2: Bool = false
    
    var body: some View {
        
        VStack {
            Text("Eres mayor de edad?")
            Toggle("Is adult?", isOn: $isAdult2)
            Text("Age: \(age2.formatted(.number))")
            Slider(value: $age2, in: 1...100, step: 1)
                
        }
        .padding()
        .onChange(of: isAdult2) { newValue in
            if newValue == true{
                age2 = 18
            } else {
                age2 = 15
            }
        }
        
    }
}
```**struct** TogglePractice: View {

@State **var** age2: Double = 18

@State **var** isAdult2: Bool = **false**

**var** body: **some** View {

VStack {

Text("Eres mayor de edad?")

Toggle("Is adult?", isOn: $isAdult2)

Text("Age: \\(age2.formatted(.number))")

Slider(value: $age2, in: 1...100, step: 1)

}

.padding()

.onChange(of: isAdult2) { newValue **in**

**if** newValue == **true**{

age2 = 18

} **else** {

age2 = 15

}

}

}

}

struct TogglePractice: View {
    
    @State var age: Double = 18
    @State var isAdult: Bool = false
    
    var body: some View {
        VStack {
            Text("Age: \(age.formatted(.number))")
            Slider(value: $age, in: 1...100, step: 1)
            Toggle("Is Adult?", isOn: $isAdult)
        }.padding()
            .onChange(of: isAdult) {
                if isAdult {
                    age = Double(Int.random(in: 18...100))
                } else {
                    age = Double(Int.random(in: 1...17))
                }
            }
            .onChange(of: age) {
                if age >= 18 {
                    isAdult = true
                } else {
                    isAdult = false
                }
            }
    }
}
```**struct** TogglePractice: View {



@State **var** age: Double = 18

@State **var** isAdult: Bool = **false**



**var** body: **some** View {

VStack {

Text("Age: \\(age.formatted(.number))")

Slider(value: $age, in: 1...100, step: 1)

Toggle("Is Adult?", isOn: $isAdult)

}.padding()

.onChange(of: isAdult) {

**if** isAdult {

age = Double(Int.random(in: 18...100))

} **else** {

age = Double(Int.random(in: 1...17))

}

}

.onChange(of: age) {

**if** age >= 18 {

isAdult = **true**

} **else** {

isAdult = **false**

}

}

}

}

Implementación de Sliders y Toggles en SwiftUI

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Desarrollo de Aplicaciones con Swift UI y Xcode

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas y optimización de memoria en SwiftUI

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

Uso de Text Field y Text Editor con Validaciones en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de Notas en SwiftUI: Creación y Personalización

Creación y Uso de Alertas y Sheets en SwiftUI

Gestos en SwiftUI: Tap, Long Press y Drag en Xcode

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Refactorización de Formularios con ViewModel en Swift

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación y Detalles en SwiftUI: Conexión de Listas y Vistas

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador