The slider is move to the top when i use HStack, VStack is work well, any ideas?

struct LockerSlider<V>: View where V : BinaryFloatingPoint, V.Stride : BinaryFloatingPoint {
var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                RoundedRectangle(cornerRadius: 15)
                    .frame(height: 30)
                
                RoundedRectangle(cornerRadius: 15)
                .frame(width:(proxy.size.width - 30) * ratio + 30,height: 30)
                Circle()
                    .frame(width: 50, height: 50)
                    .offset(x: (proxy.size.width - 30) * ratio)
                    .gesture(DragGesture(minimumDistance: 0)
                    .onChanged({ updateStatus(value: $0, proxy: proxy)
                    })
                                .onEnded { _ in startX = nil
                    
            }
            .frame(height: 30)
            .simultaneousGesture(DragGesture(minimumDistance: 0)
                                    .onChanged({ update(value: $0, proxy: proxy) }))
            .onAppear {
                ratio = min(1, max(0,CGFloat(value / bounds.upperBound)))
            }
        }
    }
}

HStack{
      Text("Custom Slider")
      LockerSlider(value: $number, in: 0...1050000, step: 0.02, length: 15,ball: 30, onEditingChanged: { _ in
      print("111")
                })
            }

when i use HStack,the slider is moving to the top areas,and i missing something?